diff --git a/jest.config.js b/jest.config.js new file mode 100644 index 00000000..98534c1c --- /dev/null +++ b/jest.config.js @@ -0,0 +1,32 @@ +module.exports = { + roots: [ + '/test' + ], + testMatch: [ + '/test/**/__tests__/**/*.{vue,js,jsx,ts,tsx}', + '/test/**/*.{spec,test}.{vue,js,jsx,ts,tsx}' + ], + testEnvironment: 'jsdom', + transform: { + '^.+\\.(vue)$': '/node_modules/vue-jest', + '^.+\\.(js|jsx|mjs|cjs|ts|tsx)$': '/node_modules/babel-jest' + }, + transformIgnorePatterns: [ + '/node_modules/', + '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$', + '^.+\\.module\\.(css|sass|scss|less)$' + ], + moduleFileExtensions: [ + 'vue', + 'js', + 'jsx', + 'ts', + 'tsx', + 'json', + 'node' + ], + moduleNameMapper: { + '@/(.*)$': '/src/$1' + }, + resetMocks: true +} diff --git a/package.json b/package.json index 01b70207..dc78c606 100644 --- a/package.json +++ b/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": [ diff --git a/src/Test.vue b/src/Test.vue new file mode 100644 index 00000000..3b723d25 --- /dev/null +++ b/src/Test.vue @@ -0,0 +1,28 @@ + + + diff --git a/src/jest.config.js b/src/jest.config.js deleted file mode 100644 index 1bd19ef3..00000000 --- a/src/jest.config.js +++ /dev/null @@ -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, ['/packages/input'] - roots: [''] -} diff --git a/src/router/index.js b/src/router/index.js index 44ecf00a..e48961d3 100644 --- a/src/router/index.js +++ b/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') diff --git a/src/views/Temp.vue b/src/views/Temp.vue deleted file mode 100644 index 8e725826..00000000 --- a/src/views/Temp.vue +++ /dev/null @@ -1,9 +0,0 @@ - - - diff --git a/test/Test.test.js b/test/Test.test.js new file mode 100644 index 00000000..2306ca50 --- /dev/null +++ b/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 +})