test: migrate to vitest (#1637)

Author: okxiaoliang4

.vscode/launch.json

@@ -1,28 +1,17 @@
-{
-  // Use IntelliSense to learn about possible attributes.
-  // Hover to view descriptions of existing attributes.
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "name": "Jest",
-      "type": "node",
-      "request": "launch",
-      "program": "${workspaceFolder}/node_modules/.bin/jest",
-      "stopOnEntry": false,
-      "args": ["${fileBasename}", "--runInBand", "--detectOpenHandles"],
-      "cwd": "${workspaceFolder}",
-      "preLaunchTask": null,
-      "runtimeExecutable": null,
-      "runtimeArgs": ["--nolazy"],
-      "env": {
-        "NODE_ENV": "development"
-      },
-      "console": "integratedTerminal",
-      "sourceMaps": true,
-      "windows": {
-        "program": "${workspaceFolder}/node_modules/jest/bin/jest",
-      }
-    }
-  ]
-}
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "vitest",
+      "type": "node",
+      "request": "launch",
+      "autoAttachChildProcesses": true,
+      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
+      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
+      "args": ["run", "${relativeFile}"],
+      "smartStep": true,
+      "console": "integratedTerminal"
+    }
+  ]
+}

jest.config.js

@@ -29,23 +29,21 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-replace": "^4.0.0",
-    "@types/jest": "27.5.0",
     "@types/node": "18.0.0",
     "@types/pretty": "^2.0.1",
     "@typescript-eslint/eslint-plugin": "^5.30.3",
     "@typescript-eslint/parser": "^5.30.3",
+    "@vitejs/plugin-vue": "^2.3.3",
+    "@vitejs/plugin-vue-jsx": "^1.3.10",
     "@vue/babel-plugin-jsx": "^1.1.1",
     "@vue/compat": "3.2.37",
     "@vue/compiler-dom": "3.2.37",
     "@vue/compiler-sfc": "3.2.37",
-    "@vue/vue3-jest": "27.0.0-alpha.4",
-    "babel-jest": "27.5.1",
-    "babel-preset-jest": "28.1.1",
+    "c8": "^7.11.3",
     "eslint": "^8.18.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "4.2.1",
     "husky": "^8.0.1",
-    "jest": "27.5.1",
     "jsdom": "^20.0.0",
     "jsdom-global": "^3.0.2",
     "lint-staged": "^13.0.3",
@@ -54,13 +52,12 @@
     "reflect-metadata": "^0.1.13",
     "rollup": "^2.75.7",
     "rollup-plugin-typescript2": "^0.32.1",
-    "ts-jest": "27.1.5",
     "tslib": "2.4.0",
     "typescript": "4.7.4",
     "vitepress": "^0.22.4",
+    "vitest": "^0.16.0",
     "vue": "3.2.37",
     "vue-class-component": "^8.0.0-rc.1",
-    "vue-jest": "^5.0.0-alpha.10",
     "vue-router": "^4.0.16",
     "vue-tsc": "0.38.2",
     "vuex": "^4.0.2"
@@ -73,8 +70,10 @@
     "email": "[email protected]"
   },
   "scripts": {
-    "test": "yarn jest --runInBand tests/",
-    "test:build": "yarn jest --runInBand tests/ -use-build",
+    "test": "yarn vitest",
+    "test:coverage": "yarn vitest --coverage",
+    "test:watch": "yarn vitest --watch",
+    "test:build": "yarn vitest --mode test-build",
     "tsd": "tsc -p test-dts/tsconfig.tsd.json",
     "build": "yarn rollup -c rollup.config.js",
     "lint": "eslint --ext .ts src/ tests/",

package.json

@@ -1,3 +1,5 @@
+import { vi } from 'vitest'
+
 const originalConsole = console.info
 
 console.info = (...args) => {
@@ -12,6 +14,10 @@ console.info = (...args) => {
   originalConsole(...args)
 }
 
-if (__USE_BUILD__) {
-  jest.mock('./src', () => jest.requireActual('./dist/vue-test-utils.cjs'))
-}
+vi.mock('./src', () => {
+  if (!__USE_BUILD__) {
+    return vi.importActual('./dist/vue-test-utils.esm-bundler.mjs')
+  } else {
+    return vi.importActual('./src')
+  }
+})

setup.js

@@ -1,6 +1,6 @@
-import { ShapeFlags } from '@vue/shared'
 import { isNotNullOrUndefined } from '../utils'
 import { VNode, VNodeArrayChildren } from 'vue'
+import { ShapeFlags } from './vueShared'
 
 export function getRootNodes(vnode: VNode): Node[] {
   if (vnode.shapeFlag & ShapeFlags.ELEMENT) {

src/utils/getRootNodes.ts

@@ -19,3 +19,17 @@ const hyphenateRE = /\B([A-Z])/g
 export const hyphenate = cacheStringFunction((str: string): string => {
   return str.replace(hyphenateRE, '-$1').toLowerCase()
 })
+
+export const enum ShapeFlags {
+  ELEMENT = 1,
+  FUNCTIONAL_COMPONENT = 2,
+  STATEFUL_COMPONENT = 4,
+  TEXT_CHILDREN = 8,
+  ARRAY_CHILDREN = 16,
+  SLOTS_CHILDREN = 32,
+  TELEPORT = 64,
+  SUSPENSE = 128,
+  COMPONENT_SHOULD_KEEP_ALIVE = 256,
+  COMPONENT_KEPT_ALIVE = 512,
+  COMPONENT = 6
+}

src/utils/vueShared.ts

@@ -4,7 +4,6 @@ import {
   ComponentCustomProperties,
   ComponentPublicInstance
 } from 'vue'
-import { ShapeFlags } from '@vue/shared'
 // @ts-ignore todo - No DefinitelyTyped package exists for this
 import pretty from 'pretty'
 
@@ -22,6 +21,7 @@ import {
   WrapperType
 } from './wrapperFactory'
 import { VNode } from '@vue/runtime-core'
+import { ShapeFlags } from './utils/vueShared'
 
 export class VueWrapper<
   T extends Omit<

src/vueWrapper.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest'
 import { defineComponent, h } from 'vue'
 import { mount } from '../src'
 import { RouterLinkStub } from '../src/components/RouterLinkStub'

tests/RouterLinkStub.spec.ts

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1
 
-exports[`shallowMount renders props for stubbed component in a snapshot 1`] = `
+exports[`shallowMount > renders props for stubbed component in a snapshot 1`] = `
 <div>
   <my-label-stub val="username"></my-label-stub>
   <async-component-stub></async-component-stub>

tests/__snapshots__/shallowMount.spec.ts.snap

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest'
 import { h } from 'vue'
 import { mount } from '../src'
 import Hello from './components/Hello.vue'

tests/attributes.spec.ts

@@ -1,3 +1,4 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { mount, enableAutoUnmount, disableAutoUnmount } from '../src'
 
 describe('enableAutoUnmount', () => {
@@ -6,21 +7,21 @@ describe('enableAutoUnmount', () => {
   })
 
   it('calls the hook function', () => {
-    const hookMock = jest.fn()
+    const hookMock = vi.fn()
 
     enableAutoUnmount(hookMock)
 
     expect(hookMock).toHaveBeenCalledWith(expect.any(Function))
   })
 
   it('uses the hook function to unmount wrappers', () => {
-    const hookMock = jest.fn()
+    const hookMock = vi.fn()
 
     enableAutoUnmount(hookMock)
     const [unmountFn] = hookMock.mock.calls[0]
 
     const wrapper = mount({ template: '<p>test</p>' })
-    jest.spyOn(wrapper, 'unmount')
+    vi.spyOn(wrapper, 'unmount')
 
     unmountFn()
 

tests/autoUnmount.spec.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest'
 import { defineComponent, h } from 'vue'
 
 import { mount } from '../src'

tests/classes.spec.ts

@@ -1,3 +1,4 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { defineComponent, ComponentPublicInstance, h, inject } from 'vue'
 import type { App } from 'vue'
 import { config, mount } from '../src'
@@ -18,7 +19,7 @@ describe('config', () => {
       renderStubDefaultSlot: false
     }
 
-    jest.clearAllMocks()
+    vi.clearAllMocks()
   })
 
   describe('config merger', () => {
@@ -55,8 +56,8 @@ describe('config', () => {
   describe('config integrity', () => {
     it('should not leak config when plugins overwrite globalProperties', async () => {
       // test with a function because it's not an "easy to clone" primitive type
-      const globalRouterMock = { push: jest.fn() }
-      const pluginRouterMock = { push: jest.fn() }
+      const globalRouterMock = { push: vi.fn() }
+      const pluginRouterMock = { push: vi.fn() }
       const Component = defineComponent({ template: '<div />' })
 
       class Plugin {
@@ -121,14 +122,14 @@ describe('config', () => {
       expect(comp.find('#default-slot').exists()).toBe(true)
 
       // @ts-expect-error
-      let comp = mount(Component, {
+      let comp2 = mount(Component, {
         shallow: true,
         global: {
           renderStubDefaultSlot: 0
         }
       })
 
-      expect(comp.find('#default-slot').exists()).toBe(false)
+      expect(comp2.find('#default-slot').exists()).toBe(false)
     })
   })
 
@@ -256,7 +257,7 @@ describe('config', () => {
   })
 
   describe('mixins', () => {
-    const createdHook = jest.fn()
+    const createdHook = vi.fn()
     const mixin = {
       created() {
         createdHook()
@@ -278,7 +279,7 @@ describe('config', () => {
 
     it('concat with locally defined mixins', () => {
       config.global.mixins = [mixin]
-      const localHook = jest.fn()
+      const localHook = vi.fn()
       const localMixin = {
         created() {
           localHook(this.$options!.name)

tests/config.spec.ts

@@ -1,3 +1,4 @@
+import { afterEach, beforeEach, expect, test } from 'vitest'
 import { mount } from '../../src'
 import Navbar from './Navbar.vue'
 import Signup from './Signup.vue'

tests/docs-examples/teleport.spec.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest'
 import { defineComponent, h } from 'vue'
 
 import { mount } from '../src'

tests/element.spec.ts

@@ -1,3 +1,4 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import {
   defineComponent,
   FunctionalComponent,
@@ -16,7 +17,7 @@ describe('emitted', () => {
 
   beforeEach(() => {
     consoleWarnSave = console.warn
-    console.warn = jest.fn()
+    console.warn = vi.fn()
   })
 
   afterEach(() => {

tests/emit.spec.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest'
 import { h, defineComponent } from 'vue'
 
 import { mount } from '../src'

tests/exists.spec.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest'
 import { mount } from '../src'
 import Hello from './components/Hello.vue'
 import DefineExpose from './components/DefineExpose.vue'

tests/expose.spec.ts

@@ -1,3 +1,4 @@
+import { expect, it } from 'vitest'
 import { mount } from '../../src'
 import ScriptSetup_ToRefsInject from '../components/ScriptSetup_ToRefsInject.vue'
 

tests/features/ScriptSetup_ToRefsInject.spec.ts

@@ -1,3 +1,4 @@
+import { expect, it } from 'vitest'
 import { mount } from '../../src'
 import ScriptSetup_WatchEffect from '../components/ScriptSetup_WatchEffect.vue'