refactor!: remove EnhancedSpy type, deprecate SpyInstance, improve mo…

…cks and vi documentation (#4400)

Co-authored-by: Anjorin Damilare <damilareanjorin1@gmail.com>

.eslintrc

@@ -44,7 +44,8 @@
     {
       "files": ["docs/**", "packages/web-worker/**", "test/web-worker/**"],
       "rules": {
-        "no-restricted-globals": "off"
+        "no-restricted-globals": "off",
+        "import/first": "off"
       }
     },
     {

docs/.vitepress/style/vars.css

@@ -5,17 +5,14 @@
 :root {
   --vp-c-accent: #dab40b;
   --vp-c-brand: #6da13f;
+  --vp-c-brand-1: var(--vp-c-brand-dark);
+  --vp-c-brand-2: var(--vp-c-brand-darker);
   --vp-c-brand-light: #7ec242;
   --vp-c-brand-lighter: #93d31c;
   --vp-c-brand-dark: #668d11;
   --vp-c-brand-darker: #52730d;
   --vp-c-text-code: #5d6f5d;
   --vp-code-block-bg: rgba(125,125,125,0.04);
-  /* fix TIP on light: the default one is too light (2 in contrast) */
-  --vp-custom-block-tip-text: rgb(12, 124, 108);
-  --vp-custom-block-tip-border: rgba(12, 124, 108, 0.5);
-  --vp-custom-block-tip-bg: rgba(18, 181, 157, 0.1);
-  /* fix contrast on gray cards: used by --vp-c-text-2 */
   --vp-c-text-light-2: rgba(56 56 56 / 70%);
   /* fix contrast: lang name on gray code block */
   --vp-c-text-dark-3: rgba(180, 180, 180, 0.7);
@@ -27,10 +24,6 @@
 .dark {
   --vp-code-block-bg: rgba(0,0,0,0.2);
   --vp-c-text-code: #c0cec0;
-  /* fix TIP: check the same above (these are the defaults) */
-  --vp-custom-block-tip-text: rgb(18, 181, 157);
-  --vp-custom-block-tip-border: rgba(18, 181, 157, 0.5);
-  --vp-custom-block-tip-bg: rgba(18, 181, 157, 0.1);
   /* fix contrast on gray cards: check the same above (this is the default) */
   --vp-c-text-dark-2: rgba(235, 235, 235, 0.60);
   /* fix lang name: check the same above (this is the default) */

docs/advanced/metadata.md

@@ -46,7 +46,7 @@ Vitest uses different methods to communicate with the Node.js process.
 
 - If Vitest runs tests inside worker threads, it will send data via [message port](https://developer.mozilla.org/en-US/docs/Web/API/MessagePort)
 - If Vitest uses child process, the data will be send as a serialized Buffer via [`process.send`](https://nodejs.org/api/process.html#processsendmessage-sendhandle-options-callback) API
-- If Vitest run tests in the browser, the data will be stringified using [flatted](https://www.npmjs.com/package/flatted) package
+- If Vitest runs tests in the browser, the data will be stringified using [flatted](https://www.npmjs.com/package/flatted) package
 
 The general rule of thumb is that you can send almost anything, except for functions, Promises, regexp (`v8.stringify` cannot serialize it, but you can send a string version and parse it in the Node.js process yourself), and other non-serializable data, but you can have cyclic references inside.
 

docs/advanced/reporters.md

@@ -58,7 +58,7 @@ export default defineConfig({
 
 ## Exported reporters
 
-`vitest` comes with a few built-in reporters that you can use out of the box.
+`vitest` comes with a few [built-in reporters](/guide/reporters) that you can use out of the box.
 
 ### Built-in reporters:
 

docs/advanced/runner.md

@@ -108,32 +108,35 @@ Snapshot support and some other features depend on the runner. If you don't want
 
 ## Your task function
 
-You can extend Vitest task system with your tasks. A task is an object that is part of a suite. It is automatically added to the current suite with a `suite.custom` method:
+You can extend Vitest task system with your tasks. A task is an object that is part of a suite. It is automatically added to the current suite with a `suite.task` method:
 
 ```js
 // ./utils/custom.js
 import { createTaskCollector, getCurrentSuite, setFn } from 'vitest/suite'
 
 export { describe, beforeAll, afterAll } from 'vitest'
 
-// this function will be called when Vitest collects tasks
-// createTaskCollector just provides all "todo"/"each"/... support, you don't have to use it
-// To support custom tasks, you just need to call "getCurrentSuite().task()"
-export const myCustomTask = createTaskCollector(function (name, fn, timeout) {
-  getCurrentSuite().task(name, {
-    ...this, // so "todo"/"skip" is tracked correctly
-    meta: {
-      customPropertyToDifferentiateTask: true
-    },
-    handler: fn,
-    timeout,
-  })
-})
+// this function will be called during collection phase:
+// don't call function handler here, add it to suite tasks
+// with "getCurrentSuite().task()" method
+// note: createTaskCollector provides support for "todo"/"each"/...
+export const myCustomTask = createTaskCollector(
+  function (name, fn, timeout) {
+    getCurrentSuite().task(name, {
+      ...this, // so "todo"/"skip"/... is tracked correctly
+      meta: {
+        customPropertyToDifferentiateTask: true
+      },
+      handler: fn,
+      timeout,
+    })
+  }
+)
 ```
 
 ```js
 // ./garden/tasks.test.js
-import { afterAll, beforeAll, describe, myCustomTask } from '../utils/custom.js'
+import { afterAll, beforeAll, describe, myCustomTask } from '../custom.js'
 import { gardener } from './gardener.js'
 
 describe('take care of the garden', () => {