feat(vitest): export all reporters in vitest/reporters (#3980)

Co-authored-by: Vladimir <sleuths.slews0s@icloud.com>

Author: Dunqing

docs/.vitepress/config.ts

@@ -129,6 +129,10 @@ export default withPwa(defineConfig({
               text: 'Task Metadata',
               link: '/advanced/metadata',
             },
+            {
+              text: 'Extending default reporters',
+              link: '/advanced/reporters',
+            },
           ],
         },
       ],

docs/advanced/reporters.md

@@ -0,0 +1,81 @@
+# Extending default reporters
+
+You can import reporters from `vitest/reporters` and extend them to create your custom reporters.
+
+## Extending built-in reporters
+
+In general, you don't need to create your reporter from scratch. `vitest` comes with several default reporting programs that you can extend.
+
+```ts
+import { DefaultReporter } from 'vitest/reporters'
+
+export default class MyDefaultReporter extends DefaultReporter {
+  // do something
+}
+```
+
+Of course, you can create your reporter from scratch. Just extend the `BaseReporter` class and implement the methods you need.
+
+And here is an example of a custom reporter:
+
+```ts
+// ./custom-reporter.ts
+import { BaseReporter } from 'vitest/reporters'
+
+export default class CustomReporter extends BaseReporter {
+  onCollected() {
+    const files = this.ctx.state.getFiles(this.watchFilters)
+    this.reportTestSummary(files)
+  }
+}
+```
+
+Or implement the `Reporter` interface:
+
+```ts
+// ./custom-reporter.ts
+import { Reporter } from 'vitest/reporters'
+
+export default class CustomReporter implements Reporter {
+  onCollected() {
+    // print something
+  }
+}
+```
+
+Then you can use your custom reporter in the `vitest.config.ts` file:
+
+```ts
+import { defineConfig } from 'vitest/config'
+import CustomReporter from './custom-reporter.js'
+
+export default defineConfig({
+  test: {
+    reporters: [new CustomReporter()],
+  },
+})
+```
+
+## Exported reporters
+
+`vitest` comes with a few built-in reporters that you can use out of the box.
+
+### Built-in reporters:
+
+1. `BasicReporter`
+1. `DefaultReporter`
+2. `DotReporter`
+3. `JsonReporter`
+4. `VerboseReporter`
+5. `TapReporter`
+6. `JUnitReporter`
+7. `TapFlatReporter`
+8. `HangingProcessReporter`
+
+### Base Abstract reporters:
+
+1. `BaseReporter`
+
+### Interface reporters:
+
+1. `Reporter`

packages/vitest/package.json

@@ -77,6 +77,10 @@
     "./coverage": {
       "types": "./coverage.d.ts",
       "import": "./dist/coverage.js"
+    },
+    "./reporters": {
+      "types": "./dist/reporters.d.ts",
+      "import": "./dist/reporters.js"
     }
   },
   "main": "./dist/index.js",

packages/vitest/reporters.d.ts

@@ -0,0 +1 @@
+export * from './dist/reporters.js'

packages/vitest/rollup.config.js

@@ -33,6 +33,7 @@ const entries = [
   'src/coverage.ts',
   'src/public/utils.ts',
   'src/public/execute.ts',
+  'src/public/reporters.ts',
 ]
 
 const dtsEntries = {
@@ -46,6 +47,7 @@ const dtsEntries = {
   coverage: 'src/coverage.ts',
   utils: 'src/public/utils.ts',
   execute: 'src/public/execute.ts',
+  reporters: 'src/public/reporters.ts',
 }
 
 const external = [

packages/vitest/src/node/reporters/index.ts

@@ -1,3 +1,4 @@
+import type { Reporter } from '../../types'
 import { BasicReporter } from './basic'
 import { DefaultReporter } from './default'
 import { DotReporter } from './dot'
@@ -7,8 +8,20 @@ import { TapReporter } from './tap'
 import { JUnitReporter } from './junit'
 import { TapFlatReporter } from './tap-flat'
 import { HangingProcessReporter } from './hanging-process'
+import type { BaseReporter } from './base'
 
-export { DefaultReporter }
+export {
+  DefaultReporter,
+  BasicReporter,
+  DotReporter,
+  JsonReporter,
+  VerboseReporter,
+  TapReporter,
+  JUnitReporter,
+  TapFlatReporter,
+  HangingProcessReporter,
+}
+export type { BaseReporter, Reporter }
 
 export const ReportersMap = {
   'default': DefaultReporter,

packages/vitest/src/public/reporters.ts

@@ -0,0 +1 @@
+export * from '../node/reporters'