jest是什么?
Jest是 Facebook 的一套开源的 JavaScript 测试框架, 它自动集成了断言、JSDom、覆盖率报告等开发者所需要的所有测试工具,是一款几乎零配置的测试框架。它能支持很多框架,比如 Babel、TypeScript、Node、React、Angular、Vue 等诸多框架。
一、Vue3项目中安装jest(文章中以vite、vue3项目为例)
1、使用 npm init vite 快速创建vue项目
npm init vite
2、cd到项目中使用命令快速集成jest
vue中使用jest,其实并没有我们想象的那么复杂,之前我学习jest的时候,查了较多资料,也配置了许多设置,繁忙且繁琐,直到最后我才发现,原来仅仅只需要执行一句指令即可。
vue add @vue/cli-plugin-unit-jest
这个命令会帮我们把相关的配置都配好,相关的依赖都装好,还会帮我们生成一个jest.config.js文件。
3、jest中常用的一些配置项的介绍
module.exports = {
preset: "@vue/cli-plugin-unit-jest/presets/no-babel", // 预置插件
moduleFileExtensions: [
//不需要配置
"js",
"json",
// 告诉 Jest 处理 `*.vue` 文件
"vue",
],
testMatch: [
//test文件所在位置
"**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)",
],
transform: {
// 用 `vue-jest` 处理 `*.vue` 文件
"^.+\\.vue$": "vue-jest",
// 用 `babel-jest` 处理 js
"^.+\\.js$": "babel-jest",
},
moduleNameMapper: {
//不需要配置
"^@/(.*)$": "<rootDir>/src/$1",
},
collectCoverage: true, //是否创建报告
collectCoverageFrom: ["**/*.{js,vue}", "!**/node_modules/**"], //创建报告的文件来源
coverageReporters: ["html", "text-summary"], //报告的格式
coveragePathIgnorePatterns: [], //生成报告需要忽略的文件,默认值为 node_modules
globals: {
//配置全局变量,此处我配置了一个全局变量VUE_APP_DATA,也可以在setup file中配置,如下说的lodash
VUE_APP_DATA: { siteENV: "DEV" },
},
setupFiles: ["<rootDir>/src/jest-setup.js"], //启动jest需要的文件
};
4、在项目的根目录中创建tests文件夹,再创建unit文件夹,在其中文件命名以 xxx.spec.js命名(执行步骤2的时候,已经给我们默认创建)
5、在package.json中设置babel选项(重要)
"babel": {
"plugins": [
"@babel/plugin-transform-modules-commonjs"
]
}
直接运行npm run test:unit,会出现错误提示 SyntaxError: Cannot use import statement outside a module,这是因为jest没支持es6导入导出功能。
6、在package.json 中添加启动命令,然后通过在控制台执行npm run test:unit 进行测试(执行步骤2的时候,已经给我们默认创建)
npm run test:unit
二、jest的基本语法规则
1、jest 支持三种方式写测试代码
- 以 .spec.js 命名
- 以 .test.js 命名
- 放在 __tests__文件夹下
2、测试代码结构
- describe: 将几个相关的测试放到一个组中,非必须
- test:(别名it)测试用例,是测试的最小单位
- expect:提供很多的matcher API来判定你的方法返回值是否符合特定条件
3、mock方法和前后处理
- Jest的mock方式 (Jest.fn()、Jest.spyOn()、Jest.mock())
- 预处理和后处理 beforeAll / afterAll : 对测试文件中所有的用例开始前/后进行统一的预处理 beforeEach/ afterEach : 在每个用例开始前/后进行预处理
4、覆盖率指标
在package.json中 设置 --coverage 即可 测试覆盖率
"test:unit": "vue-cli-service test:unit --coverage"
- %Stmts是语句覆盖率(statement coverage):是不是每个语句都执行了
- %Branch分支覆盖率(branch coverage):是不是每个if代码块都执行了
- %Funcs函数覆盖率(function coverage):是不是每个函数都调用了
- %Lines行覆盖率(line coverage):是不是每一行都执行了
配置好并执行npm run test:unit之后,会生成一个coverage文件夹
然后打开coverage/lcov-report里面的index.html 里面会有详细的信息展示
柱状条三种颜色分别代表不同比例的覆盖率(<50%红色,50% - 80%灰色, ≥80%绿色)
好的测试覆盖率标准:80%以下不及格、90%以上可以使用、95%以上优秀。
5、wrapper的声明和用法
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, {
props: { msg }
})
expect(wrapper.text()).toMatch(msg)
})
})
mount: 创建一个包含被挂载和渲染的 Vue 组件的 wrapper,它仅仅挂载当前实例
shallowMount:和 mount 一样,创建一个包含被挂载和渲染的 Vue 组件的 Wrapper,只挂载一个组件而不渲染其子组件 (即保留它们的存根),这个方法可以保证你关心的组件在渲染时没有同时将其子组件渲染,避免了子组件可能带来的副作用(比如Http请求等)。
shallowMount和mount的区别:在文档中描述为"不同的是被存根的子组件",就是说shallowMount不会加载子组件,不会被子组件的行为属性影响该组件。
Wrapper 是一个包括了一个挂载组件或 vnode,以及测试该组件或 vnode 的方法
Wrapper.vm:这是该 Vue 实例。你可以通过 wrapper.vm 访问一个实例所有的方法和属性
Wrapper.classes: 返回是否拥有该class的dom或者类名数组
Wrapper.find:返回第一个满足条件的dom
Wrapper.findAll:返回所有满足条件的dom
Wrapper.html:返回html字符串
Wrapper.text:返回内容字符串
Wrapper.setData:设置该组件的初始data数据
Wrapper.setProps:设置该组件的初始props数据
Wrapper.trigger:用来触发事件
三、jest的常用API
- toBe:匹配器有种类似于object.is或者===
- toEqual:测试对象的内容是否相等,不比较对象的地址,只关心对象的内容是否一致,递归检查对象或数组的每个字段
- toBeNull:判断是否为null
- toBeUndefined:判断是否为undefined
- toBeDefined:与上相反
- toBeNaN:判断是否为NaN
- toBeTruthy:判断是否为true
- toBeFalsy:判断是否为false
- toContain:数组用,检测是否包含
- toHaveLength:数组用,检测数组长度
- toThrow:异常匹配
写在最后
想了解更多jest实践,欢迎浏览作者下一篇文章Vue3项目实战jest,学会了升职加薪(下篇)
推荐两个作者参与的开源项目,如果项目有帮助到你,欢迎star
一个简单的基于Vue3、TS、Vite、qiankun技术栈的后台管理项目:www.xkxk.tech
一个基于Vue3的仿Element plus组件项目:ui.xkxk.tech