脚本宝典收集整理的这篇文章主要介绍了vue单元测试-Jest,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
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/j...,需要增加babel插件
@H_304_22@"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/**"
]
}
官网默认存放目录如下
5.运行 npm run test ,控制台执行结果如下
参考:
Vue Test Utils
Jest
以上是脚本宝典为你收集整理的vue单元测试-Jest全部内容,希望文章能够帮你解决vue单元测试-Jest所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。