引子
问题
vue/cli单元测试命令会检验所有文件,耗时长,尤其是巨石应用。另外jest.confg.js中开启了coverage生成单元测试覆盖率报告,该配置文件devops上要用不想修改它。
"test:unit": "vue-cli-service test:unit"
方案
· 在jest中支持esm
// babel.config.js
module.exports = { presets: ['@babel/preset-env']}
此方案可以解决jest单测的问题,但影响了项目的启动。若仍采用当前方案,可参考这篇文章试试:【前端测试课】如何在 jest 中支持 esm
· vue/cli3升级到vue/cli4
npm install -g @vue/cli
OR
yarn global add @vue/cli
npm update -g @vue/cli
或者
yarn global upgrade --latest @vue/cli
vue/cli安装及项目cli升级耗时较长,手动修改package.json中的版本号再重新npm i或yarn更快。
// package.json
"@vue/cli-plugin-babel": "^3.0.4"
"@vue/cli-plugin-eslint": "^3.0.4"
"@vue/cli-plugin-unit-jest": "^3.4.1"
"@vue/cli-service": "^3.5.1"
"@vue/cli-plugin-babel": "~4.4.0" // 主要是这项,其它项也可以改成~4.4.0
然后把babel的preset修改成@vue/cli-plugin-babel/preset,此时仍然只修复了jest,项目启动报如下错误。
配置babel兼容性属性useBuiltIns即可:
// babel.config.js
module.exports = { presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'entry' }]]}
指定文件实时单测
· yarn run
如果你不指定一个脚本给 yarn run 命令,run 命令会列出包里所有可运行的脚本。参考文档:yarn官方中文文档。
使用yarn就可以在项目中执行node_modules中bin里的命令,而无需在package.json的添加额外的scripts配置和安装全局的jest了。yarn命令中还允许省略run。
· yarn jest
有了yarn,我们就可以如下命令监听指定的文件变化做到实时TDD了。
// 监听单个文件
yarn jest tests/unit/App.spec.js --watch --coverage=false
# OR
// 监听整个模块
yarn jest tests/unit/components/**/*.spec.js --watch --coverage=fasle
关于插件
VSCode的jest插件,要么跑全部的单测,要么得自己手动点run/debug。在多人共同开发、有技术债的巨石应用中并不好用。如果有支持指定文件或文件夹实时变化自动单测的插件,欢迎在评论区告诉我。
总结
至此,我们实现了指定文件jest单测编写自动执行检测。
一来不需要跑耗时的全部单测,这对巨石应用尤为重要。
二来多人开发时,可以屏蔽掉他人的单测错误累积的技术债,终端提示更清爽。
本文内容不用于商业目的,如涉及知识产权问题,请权利人联系51Testing小编(021-64471599-8017),我们将立即处理