引子
最近在补技术债中的单元测试覆盖率，所在项目为巨石应用，以前的单测有不少错误，希望编写时屏蔽它们，只测试自己当前开发的模块，最好还能实时监听变化自动执行单测，更好得实践TDD。
问题
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单测编写自动执行检测。
一来不需要跑耗时的全部单测，这对巨石应用尤为重要。
二来多人开发时，可以屏蔽掉他人的单测错误累积的技术债，终端提示更清爽。
