test: migrate to vitest

package.json

@@ -29,23 +29,20 @@
     "@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.0",
     "@typescript-eslint/parser": "^5.30.0",
+    "@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",
     "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 +51,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.35.2",
     "vuex": "^4.0.2"
@@ -73,8 +69,8 @@
     "email": "lachlan.miller.1990@outlook.com"
   },
   "scripts": {
-    "test": "yarn jest --runInBand tests/",
-    "test:build": "yarn jest --runInBand tests/ -use-build",
+    "test": "yarn vitest",
+    "test:build": "yarn vitest -use-build",
     "tsd": "tsc -p test-dts/tsconfig.tsd.json",
     "build": "yarn rollup -c rollup.config.js",
     "lint": "eslint --ext .ts src/ tests/",

setup.js

@@ -1,3 +1,5 @@
+import { vi } from 'vitest'
+
 const originalConsole = console.info
 
 console.info = (...args) => {
@@ -13,5 +15,5 @@ console.info = (...args) => {
 }
 
 if (__USE_BUILD__) {
-  jest.mock('./src', () => jest.requireActual('./dist/vue-test-utils.cjs'))
+  vi.mock('./src', () => vi.importActual('./dist/vue-test-utils.cjs'))
 }

tests/__snapshots__/shallowMount.spec.ts.snap

@@ -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/autoUnmount.spec.ts

@@ -6,21 +6,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/config.spec.ts

@@ -18,7 +18,7 @@ describe('config', () => {
       renderStubDefaultSlot: false
     }
 
-    jest.clearAllMocks()
+    vi.clearAllMocks()
   })
 
   describe('config merger', () => {
@@ -55,8 +55,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 +121,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 +256,7 @@ describe('config', () => {
   })
 
   describe('mixins', () => {
-    const createdHook = jest.fn()
+    const createdHook = vi.fn()
     const mixin = {
       created() {
         createdHook()
@@ -278,7 +278,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/emit.spec.ts

@@ -16,7 +16,7 @@ describe('emitted', () => {
 
   beforeEach(() => {
     consoleWarnSave = console.warn
-    console.warn = jest.fn()
+    console.warn = vi.fn()
   })
 
   afterEach(() => {

tests/features/async-components.spec.ts

@@ -11,8 +11,12 @@ const config: Partial<AppConfig> = {
 
 // AsyncComponents are documented here: https://github.com/vuejs/rfcs/blob/async-component/active-rfcs/0026-async-component-api.md
 describe('defineAsyncComponent', () => {
-  beforeAll(() => jest.useFakeTimers())
-  afterAll(() => jest.useRealTimers())
+  beforeAll(() => {
+    vi.useFakeTimers()
+  })
+  afterAll(() => {
+    vi.useRealTimers()
+  })
 
   it('works with the basic usage', async () => {
     const AsyncHello = defineAsyncComponent(
@@ -52,11 +56,11 @@ describe('defineAsyncComponent', () => {
     })
 
     const wrapper = mount(Comp, { global: { config } })
-    jest.advanceTimersByTime(35)
+    vi.advanceTimersByTime(35)
     await flushPromises()
     expect(wrapper.html()).toContain('Loading Component')
 
-    jest.advanceTimersByTime(100)
+    vi.advanceTimersByTime(100)
     await flushPromises()
     expect(wrapper.html()).toContain('Async Component')
   })

tests/features/compat.spec.ts

@@ -1,7 +1,7 @@
 import * as mockVue from '@vue/compat'
 import { mount } from '../../src'
 
-jest.mock('vue', () => mockVue)
+vi.mock('vue', () => mockVue)
 
 const { configureCompat, extend, defineComponent, h } = mockVue
 
@@ -136,8 +136,7 @@ describe('@vue/compat build', () => {
   it('correctly uses stubs when stub is legacy component', () => {
     configureCompat({
       MODE: 3,
-      GLOBAL_EXTEND: 'suppress-warning',
-      GLOBAL_MOUNT: 'suppress-warning'
+      GLOBAL_EXTEND: 'suppress-warning'
     })
 
     const Foo = {
@@ -190,7 +189,7 @@ describe('@vue/compat build', () => {
       }
     }
 
-    const onClick = jest.fn()
+    const onClick = vi.fn()
     const wrapper = mount(FunctionalComponent, {
       props: {
         class: 'foo',

tests/features/plugins.spec.ts

@@ -56,7 +56,7 @@ describe('Plugin#install', () => {
   })
 
   it('supports functions', () => {
-    const myMethod = jest.fn()
+    const myMethod = vi.fn()
     const plugin = () => ({ myMethod })
     config.plugins.VueWrapper.install(plugin)
     mountComponent().myMethod()
@@ -65,7 +65,7 @@ describe('Plugin#install', () => {
 
   describe('error states', () => {
     beforeAll(() => {
-      jest.spyOn(console, 'error').mockImplementation(() => {})
+      vi.spyOn(console, 'error').mockImplementation(() => {})
     })
 
     afterAll(() => {
@@ -107,7 +107,7 @@ describe('createStubs', () => {
     render: () => h('div', [h(Child1), h(Child1), h(Child2)])
   }
 
-  const customCreateStub = jest.fn(({ name }) => h(`${name}-custom-stub`))
+  const customCreateStub = vi.fn(({ name }) => h(`${name}-custom-stub`))
   beforeAll(() => {
     config.plugins.createStubs = customCreateStub
   })

tests/features/suspense.spec.ts

@@ -3,7 +3,7 @@ import { mount, flushPromises } from '../../src'
 import { defineComponent } from 'vue'
 
 let mockShouldError = false
-jest.mock('../utils', () => ({
+vi.mock('../utils', () => ({
   simulateDelay: () => {
     if (mockShouldError) {
       throw new Error('Error!')

tests/features/teleport.spec.ts

@@ -56,7 +56,7 @@ describe('teleport', () => {
     destination.id = 'far-away'
     document.body.appendChild(destination)
 
-    const onGreet = jest.fn()
+    const onGreet = vi.fn()
 
     const Comp = defineComponent({
       setup() {
@@ -85,7 +85,7 @@ describe('teleport', () => {
     destination.id = 'far-away'
     document.body.appendChild(destination)
 
-    const onGreet = jest.fn()
+    const onGreet = vi.fn()
 
     const Comp = defineComponent({
       setup() {

tests/getComponent.spec.ts

@@ -14,7 +14,7 @@ const compB = defineComponent({
 describe('getComponent', () => {
   it('should delegate to findComponent', () => {
     const wrapper = mount(compA)
-    jest.spyOn(wrapper, 'findComponent').mockReturnThis()
+    vi.spyOn(wrapper, 'findComponent').mockReturnThis()
     wrapper.getComponent('.domElement')
     expect(wrapper.findComponent).toHaveBeenCalledWith('.domElement')
   })

tests/lifecycle.spec.ts

@@ -12,9 +12,9 @@ import { mount } from '../src'
 
 describe('lifecycles', () => {
   it('calls onMounted', async () => {
-    const beforeMountFn = jest.fn()
-    const onBeforeMountFn = jest.fn()
-    const onMountFn = jest.fn()
+    const beforeMountFn = vi.fn()
+    const onBeforeMountFn = vi.fn()
+    const onMountFn = vi.fn()
     const Component = defineComponent({
       beforeMount() {
         beforeMountFn()
@@ -34,9 +34,9 @@ describe('lifecycles', () => {
   })
 
   it('calls onUnmounted', async () => {
-    const beforeUnmountFn = jest.fn()
-    const onBeforeUnmountFn = jest.fn()
-    const onUnmountFn = jest.fn()
+    const beforeUnmountFn = vi.fn()
+    const onBeforeUnmountFn = vi.fn()
+    const onUnmountFn = vi.fn()
     const Component = defineComponent({
       beforeUnmount: beforeUnmountFn,
       setup() {
@@ -53,7 +53,7 @@ describe('lifecycles', () => {
     expect(onBeforeUnmountFn).not.toHaveBeenCalled()
     expect(onUnmountFn).not.toHaveBeenCalled()
 
-    const removeChildSpy = jest.spyOn(
+    const removeChildSpy = vi.spyOn(
       wrapper.element.parentElement!,
       'removeChild'
     )

tests/mountingOptions/global.components.spec.ts

@@ -24,7 +24,7 @@ describe('global.components', () => {
     const GlobalComponent = {
       template: '<div>Global</div>'
     }
-    const spy = jest.spyOn(console, 'warn')
+    const spy = vi.spyOn(console, 'warn')
     const wrapper = mount(
       {
         template: '<div><global-component/></div>'
@@ -52,7 +52,7 @@ describe('global.components', () => {
     const GlobalComponent = {
       template: '<div>Global</div>'
     }
-    const spy = jest.spyOn(console, 'warn')
+    const spy = vi.spyOn(console, 'warn')
     const wrapper = mount(
       {
         template: '<div><global-component/></div>'

tests/mountingOptions/global.mixins.spec.ts

@@ -4,7 +4,7 @@ import { mount } from '../../src'
 
 describe('mounting options: mixins', () => {
   it('installs a mixin via `mixins`', () => {
-    const createdHook = jest.fn()
+    const createdHook = vi.fn()
     const mixin = {
       created() {
         createdHook()