用vue-cli创建的项目可以选择集成单元测试,这样就会自动构建好test目录
那没有用vue-cli创建的项目该如何引入单元测试(jest+vue/test-utils)
npm install 安装包
注意安装版本
“@vue/test-utils”: “^1.1.3”,
“babel-helper-vue-jsx-merge-props”: “^2.0.3”,
“babel-jest”: “^21.0.2”,
“babel-plugin-dynamic-import-node”: “^1.2.0”,
“babel-plugin-syntax-jsx”: “^6.18.0”,
“babel-plugin-transform-es2015-modules-commonjs”: “^6.26.0”,
“babel-plugin-transform-vue-jsx”: “^3.5.0”,
“jest”: “^22.0.4”,
“jest-serializer-vue”: “^0.3.0”,
“vue-jest”: “^1.0.2”,
Package.json
“unit”: “jest --config test/unit/jest.conf.js --coverage”
在test/unit 里面新增两个文件
Jest.conf.js 这个文件我已做了修改可以直接运行,如果是新搭的测试框架,是不能正常运行的
Jest.conf.js
const path = require('path');
module.exports = {
rootDir: path.resolve(__dirname, '../../'),
moduleFileExtensions: [
'js',
'json',
'vue',
],
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1',
},
transform: {
'^.+\\.js$': '<rootDir>/node_modules/babel-jest',
'.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
},
testPathIgnorePatterns: [
'<rootDir>/test/e2e',
],
snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
setupFiles: ['<rootDir>/test/unit/setup'],
coverageDirectory: '<rootDir>/test/unit/coverage',
collectCoverageFrom: [
'src/components/common/**/*.{js,vue}',
'!src/main.js',
'!src/router/index.js',
'!**/node_modules/**',
],
verbose: true, // 新增
testURL: 'http://localhost/', // 新增
};
Setup.js
import Vue from ‘vue’;
Vue.config.productionTip = false;
运行 npm run unit
注意:写单元测试的时候,组件名字最好不要index.vue,不然测试覆盖率会检测不到文件