vue单元测试-Jest（vue3单元测试）

vue接入单元测试Jest,配置花了点时间，相对于selenium+mocha+karma那套配置简单多了

1.安装

npm install --save-dev jest @vue/test-utils
npm install --save-dev vue-jest
npm install --save-dev babel-jest
npm install --save-dev jest-serializer-vue

2.配置babel

babel配置可以写在package.json，也可以写在.babelrc文件，我的项目是写在.babelrc，并且是分环境，这里不能直接参考网上给出的~坑就在这里，翻阅了内外网资料，仔细看代码才写正确，并且由于报错:Unexpected Token Import for ES6 modules

终于在https://github.com/facebook/jest/issues/2081上找到解法，需要增加babel插件

"test": {
 "presets": [
 ["env", {
 "targets": { 
 "node": "current" 
 },
 "modules": false
 }]
 ],
 "plugins": ["transform-es2015-modules-commonjs"]
 }

至此，三套环境的配置如下，官网那个配置简单环境用用就行了，复杂环境还是要多试试：

3.配置package.json,增加jest的配置

 "jest": {
 "moduleFileExtensions": [
 "js",
 "json",
 "vue"
 ],
 "moduleNameMapper": {
 "^src/(.*)$": "<rootDir>/src/$1"
 },
 "transform": {
 "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
 ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
 },
 "snapshotSerializers": [
 "<rootDir>/node_modules/jest-serializer-vue"
 ],
 "coverageDirectory": "<rootDir>/test/unit/coverage",
 "collectCoverageFrom": [
 "src/**/*.{js,vue}",
 "!src/index.js",
 "!src/router/index.js",
 "!**/node_modules/**"
 ]
 }

4. 测试用例存放目录，自己可以写testRegex的正则匹配存放的测试用例，匹配错误的控制台会有提示：Your test suite must contain at least one test，看到这个提示就要检查测试用例的命名是否正确的

• 官网默认存放目录如下

5.运行 npm run test ，控制台执行结果如下

参考：

Vue Test Utils

Jest