feat: 增加单元测试功能

jest.config.js

@@ -0,0 +1,32 @@
+module.exports = {
+  roots: [
+    '<rootDir>/test'
+  ],
+  testMatch: [
+    '<rootDir>/test/**/__tests__/**/*.{vue,js,jsx,ts,tsx}',
+    '<rootDir>/test/**/*.{spec,test}.{vue,js,jsx,ts,tsx}'
+  ],
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.(vue)$': '<rootDir>/node_modules/vue-jest',
+    '^.+\\.(js|jsx|mjs|cjs|ts|tsx)$': '<rootDir>/node_modules/babel-jest'
+  },
+  transformIgnorePatterns: [
+    '<rootDir>/node_modules/',
+    '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$',
+    '^.+\\.module\\.(css|sass|scss|less)$'
+  ],
+  moduleFileExtensions: [
+    'vue',
+    'js',
+    'jsx',
+    'ts',
+    'tsx',
+    'json',
+    'node'
+  ],
+  moduleNameMapper: {
+    '@/(.*)$': '<rootDir>/src/$1'
+  },
+  resetMocks: true
+}

package.json

@@ -6,6 +6,7 @@
     "serve": "vue-cli-service serve",
     "build": "cross-env NODE_ENV=production vue-cli-service build",
     "lint": "vue-cli-service lint",
+    "test": "jest",
     "analyz": "cross-env NODE_ENV=production npm_config_report=true npm run build"
   },
   "dependencies": {
@@ -48,17 +49,23 @@
     "@rollup/plugin-commonjs": "^15.1.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@rollup/plugin-typescript": "^6.0.0",
-    "@types/jest": "^26.0.10",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/vue": "^6.4.2",
+    "@types/jest": "^26.0.24",
     "@types/lodash": "^4.14.161",
     "@typescript-eslint/eslint-plugin": "^3.10.1",
     "@typescript-eslint/parser": "^3.10.1",
     "@vue/babel-plugin-jsx": "^1.0.0",
+    "@vue/babel-preset-app": "^5.0.8",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
     "@vue/component-compiler-utils": "^3.2.0",
+    "@vue/test-utils": "^2.0.0-rc.18",
     "babel-eslint": "^10.1.0",
+    "babel-jest": "^26.0.0",
     "compression-webpack-plugin": "^8.0.1",
     "cross-env": "^7.0.3",
     "eslint": "^7.22.0",
@@ -67,7 +74,10 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.3.1",
     "eslint-plugin-vue": "^7.7.0",
+    "jest": "^26.0.0",
+    "ts-jest": "^26.4.4",
     "uglifyjs-webpack-plugin": "^2.2.0",
+    "vue-jest": "^5.0.0-alpha.10",
     "vue3-ace-editor": "^2.0.2"
   },
   "browserslist": [

src/Test.vue

@@ -0,0 +1,28 @@
+<template>
+  <span data-test="count">{{count}}</span>
+  <button data-test="button" @click="click">click</button>
+</template>
+
+<script>
+/* vue-jest的测试示例 */
+import VueRouter from 'vue-router'
+export default {
+  name: 'Test',
+  data () {
+    return {
+      count: 0
+    }
+  },
+  methods: {
+    click () {
+      this.count++
+    }
+  },
+  created () {
+    const { currentRoute } = VueRouter.useRouter()
+    return {
+      currentRoute
+    }
+  }
+}
+</script>

src/jest.config.js

@@ -1,37 +0,0 @@
-module.exports = {
-  globals: {
-    // work around: https://github.com/kulshekhar/ts-jest/issues/748#issuecomment-423528659
-    'ts-jest': {
-      diagnostics: {
-        ignoreCodes: [151001]
-      }
-    }
-  },
-  testEnvironment: 'jsdom',
-  transform: {
-    '^.+\\.vue$': 'vue-jest',
-    '^.+\\.(t|j)sx?$': [
-      'babel-jest', {
-        presets: [
-          [
-            '@babel/preset-env',
-            {
-              targets: {
-                node: true
-              }
-            }
-          ],
-          '@babel/preset-typescript'
-        ],
-        plugins: [
-          '@vue/babel-plugin-jsx',
-          '@babel/plugin-proposal-class-properties'
-        ]
-      }
-    ]
-  },
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
-  // u can change this option to a more specific folder for test single component or util when dev
-  // for example, ['<rootDir>/packages/input']
-  roots: ['<rootDir>']
-}

src/router/index.js

@@ -31,10 +31,6 @@ const routes = [
         path: '/detection/:typeName',
         component: () => import('@/views/detections/Index')
       },
-      {
-        path: '/temp',
-        component: () => import('@/views/Temp')
-      },
       {
         path: '/businessLog/viewer',
         component: () => import('@/views/businessLog/Viewer')

src/views/Temp.vue

@@ -1,9 +0,0 @@
-<template>
-  <div>Temp</div>
-</template>
-
-<script>
-export default {
-  name: 'Temp'
-}
-</script>

test/Test.test.js

@@ -0,0 +1,34 @@
+import Test from '../src/Test'
+import { mount } from '@vue/test-utils'
+
+// 模拟vue-router库，否则组件中引用vue-router的代码报错
+jest.mock('vue-router', () => {
+  return {
+    useRouter: function () { return { currentRoute: '/' } }
+  }
+})
+test('点击按钮后count的值+1', async () => {
+  // 加载vue组件，获得实例
+  const wrapper = mount(Test)
+
+  // 取到文本和按钮的dom
+  const textNode = await wrapper.get('[data-test="count"]')
+  const button = await wrapper.get('[data-test="button"]')
+  // 断言文本dom的内容是否是'0'
+  expect(textNode.text()).toContain('0')
+  // 模拟按钮dom点击，执行click()方法
+  await button.trigger('click')
+  // 断言点击按钮后文本dom的内容是否是'1'
+  expect(textNode.text()).toContain('1')
+  // 再次点击
+  await button.trigger('click')
+  // 断言点击按钮后文本dom的内容是否是'2'
+  expect(textNode.text()).toContain('2')
+
+  // 通过wrapper.vm.xxx直接执行click方法、获取data的数据
+  expect(wrapper.vm.count).toEqual(2)
+  await wrapper.vm.click()
+  expect(wrapper.vm.count).toEqual(3)
+
+  // 更多断言类型：https://jestjs.io/zh-Hans/docs/expect
+})