说到项目会分为新建的醒目和老项目两种,我们先来说新项目。
新项目加入jest单元测试:
1、创建项目
使用vue脚手架创建项目 test-vue-jest
vue create test-vue-jest
2、创建项目过程中配置选项
在配置项中按照正常创建项目选择配置项即可,此外需要选择单元测试“Unit Testing” 和 “Jest”选项如下图:
3、目录结构
项目中tests\unit目录存放测试文件
4、运行单元测试
在package.json中会生成如下:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit"
},
其中"test:unit": "vue-cli-service test:unit" 会帮我们运行单元测试,其过程中会自动取单元测试文件目录下执行所有的测试文件。
我们命令行工具在当前项目根目录下运行:npm run test:unit
测试结果如下图:
5、生成测试覆盖率信息及文件
首先找到jset配置文件,位置在项目根目录中的jest.config.js
jest.config.js文件中增加"collectCoverage" 和 "collectCoverageFrom"两个配置项:
module.exports = {
preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
// 开启生成覆盖率功能
"collectCoverage": true,
// 配置需要检查覆盖率的文件
"collectCoverageFrom": [
"src/**/*.{js,vue}"
]
}
运行npm run test:unit
再看我们的项目目录多出了coverage\lcov-report目录其中的index.html是生成的测试覆盖率结果文件
目录结构:
我们运行测试结果文件index.htm
新项vue项目我们使用vue-cli可以直接配置安装jest,通过 简单的配置我们就可以使用了。
jest搭建vue项目单元测试-现有老项目