Study NoteAppearance
导读
为什么需要单元测试：
- 检测bug;
- 提升回归效率；
- 保证代码质量。
一、框架对比
①、Mocha
比较灵活成熟，但没有内部集成，需要自主选择断言库和监听库。。
②、Jasmine
是 Jest 的底层库，助攻 BDD（即行为驱动开发）断言库与异步测试的自动化测试框架，没有外部依赖。运行在node.js 上，没有外部库，所以可以兼容所有的框架和库，但配置过程更加繁琐，使用较复杂。
③、Jest
由 FackBook 推出的，目前前端测试领域最火热的框架，它功能齐全，所需配置少，默认安装了 JSDOM，易于使用，支持异步测试，mock和快照等功能。
安全快速、开箱即用、守护模式（注重开发体验）、快照测试、文档齐全、强大的生态
④、Vue Test Utils
Vue.js 官方提供的测试工具库，它提供了一套 API 来编写和运行 Vue 组件测试用例。
安装
项目使用 vue-cli 构建，所以这里直接使用下面命令安装：
vue add @vue/cli-plugin-unit-jest
配置
执行命令 vue add @vue/cli-plugin-unit-jest 后，项目中会自动生成一个 jest.config.js 文件，自动创建了tests/unit/example.spec.js测试文件，以及在 package.json 文件中，自动加入了 eslint 所需配置。自动生成的代码具体如下：
js
// jest.config.js
module.exports = {
preset: '@vue/cli-plugin-unit-jest'
}
js
// example.spec.js
import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'
describe('HelloWorld.vue', () => {
it('renders props.msg when passed', () => {
const msg = 'new message'
const wrapper = shallowMount(HelloWorld, {
propsData: { msg }
})
expect(wrapper.text()).toMatch(msg)
})
})
js
// package.json
"eslintConfig": {
"overrides": [
{
"files": [
"**/__tests__/*.{j,t}s?(x)",
"**/tests/unit/**/*.spec.{j,t}s?(x)"
],
"env": {
"jest": true
}
}
]
}
另外，命令在 package.json 中自动添加了启动命令，在控制台执行 npm run test:unit，就可以看到测试结果。
jest.config.js 配置项（参考）
js
module.exports = {
// 预设
preset: '@vue/cli-plugin-unit-jest',
// 多于一个测试文件运行时展示每个测试用例测试通过情况
verbose: true,
// 参数指定只要有一个测试用例没有通过，就停止执行后面的测试用例
bail: true,
// 测试环境，jsdom 可以在 Node 虚拟浏览器环境运行测试
testEnvironment: 'jsdom',
// 需要检测的文件类型(不需要配置)
moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
// 预处理器配置，匹配的文件要经过转译才能被识别，否则会报错(不需要配置)
transform: {
// 用 `vue-jest` 处理 `*.vue` 文件
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
// 用 `babel-jest` 处理 js
"^.+\\.js$": "babel-jest"
},
// 转译时忽略 node_modules
transformIgnorePatterns: ['/node_modules/'],
// 从正则表达式到模块名称的映射，和webpack的alisa类似(不需要配置)
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1'
},
// Jest用于检测测试的文件，可以用正则去匹配
testMatch: [
'**/tests/unit/**/*.spec.[jt]s?(x)',
'**/__tests__/*.[jt]s?(x)'
],
// 是否显示覆盖率报告，开启后显示代码覆盖率详细信息，将测试用例结果输出到终端
collectCoverage: true,
// 告诉 jest 哪些文件需要经过单元测试测试
collectCoverageFrom: ["src/**/*.{js,vue}", "!**/node_modules/**"],
// 覆盖率报告输出的目录
coverageDirectory: 'tests/unit/coverage',
// 报告的格式
coverageReporters: ["html", "text-summary"],
// 需要跳过覆盖率信息收集的文件目录
coveragePathIgnorePatterns: ['/node_modules/'],
// 设置单元测试覆盖率阈值, 如果未达到阈值，Jest 将返回失败
coverageThreshold: {
global: {
statements: 90, // 保证每个语句都执行了
functions: 90, // 保证每个函数都调用了
branches: 90, // 保证每个 if 等分支代码都执行了
lines: 90
},
},
// Jest在快照测试中使用的快照序列化程序模块的路径列表
snapshotSerializers: ["<rootDir>/node_modules/jest-serializer-vue"]
}