feat(teach-frontend): 04&05-测试 useRouter 的最佳测试&重构test helper

apps/teach-frontend/package.json

@@ -31,6 +31,7 @@
     "@unocss/reset": "^0.48.3",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^3.0.0",
+    "@vue/test-utils": "^2.2.10",
     "@vueuse/core": "^9.10.0",
     "cross-env": "^7.0.3",
     "flush-promises": "^1.0.2",
@@ -42,6 +43,7 @@
     "unocss": "^0.48.3",
     "vite": "^4.0.4",
     "vitest": "^0.27.0",
+    "vue-router-mock": "^0.2.0",
     "vue-tsc": "^1.0.24"
   }
 }

apps/teach-frontend/src/components/header/theHeader.spec.ts

@@ -1,33 +1,24 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { useRouter } from 'vue-router'
+import { describe, expect, it } from 'vitest'
 import { useGoto } from './theHeader'
+import { useSetup } from '@/tests/helper'
 
-vi.mock('vue-router')
-
-const pushFn = vi.fn()
-vi.mocked(useRouter as () => { push: Function }).mockImplementation(() => {
-  return {
-    push: pushFn,
-  }
-})
-
-describe('theHeader', () => {
-  beforeEach(() => {
-    pushFn.mockClear()
-  })
+describe('the header', () => {
   it('should be go to home page', () => {
-    const { goToHome } = useGoto()
-
-    goToHome()
+    const { router } = useSetup(() => {
+      const { goToHome } = useGoto()
+      goToHome()
+    })
 
-    expect(pushFn).toBeCalledWith({ name: 'Home' })
+    expect(router.push).toBeCalledWith({ name: 'Home' })
   })
 
   it('should be go to settings page', () => {
-    const { goToSettings } = useGoto()
+    const { router } = useSetup(() => {
+      const { goToSettings } = useGoto()
 
-    goToSettings()
+      goToSettings()
+    })
 
-    expect(pushFn).toBeCalledWith({ name: 'Settings' })
+    expect(router.push).toBeCalledWith({ name: 'Settings' })
   })
 })

apps/teach-frontend/src/tests/helper/component.ts

@@ -0,0 +1,14 @@
+import { mount } from '@vue/test-utils'
+export function useSetup(setup: () => void) {
+  const Comp = {
+    render() {},
+    setup,
+  }
+
+  const wrapper = mount(Comp)
+
+  return {
+    wrapper,
+    router: wrapper.router,
+  }
+}

apps/teach-frontend/src/tests/helper/index.ts

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

apps/teach-frontend/vite.config.ts

@@ -1,10 +1,14 @@
 import path from 'node:path'
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vitest/config'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import Unocss from 'unocss/vite'
 
 export default defineConfig({
+  test: {
+    environment: 'happy-dom',
+    setupFiles: './vitest.setup.ts',
+  },
   server: {
     proxy: {
       '/api': {

apps/teach-frontend/vitest.setup.ts

@@ -0,0 +1,25 @@
+import {
+  VueRouterMock,
+  createRouterMock,
+  injectRouterMock,
+} from 'vue-router-mock'
+import { beforeEach, vi } from 'vitest'
+import { config } from '@vue/test-utils'
+
+function setupRouterMock() {
+  const router = createRouterMock({
+    spy: {
+      create: fn => vi.fn(fn),
+      reset: spy => spy.mockClear(),
+    },
+  })
+
+  beforeEach(() => {
+    router.reset()
+    injectRouterMock(router)
+  })
+
+  config.plugins.VueWrapper.install(VueRouterMock)
+}
+
+setupRouterMock()