Vue3项目实践jest,学会了升职加薪(上篇)

3,351 阅读5分钟

jest是什么?

Jest是 Facebook 的一套开源的 JavaScript 测试框架, 它自动集成了断言、JSDom、覆盖率报告等开发者所需要的所有测试工具,是一款几乎零配置的测试框架。它能支持很多框架,比如 Babel、TypeScript、Node、React、Angular、Vue 等诸多框架。

一、Vue3项目中安装jest(文章中以vite、vue3项目为例)

1、使用 npm init vite 快速创建vue项目

npm init vite

42a202ab4b90f300daf52ea2bac6f50.png

2、cd到项目中使用命令快速集成jest

vue中使用jest,其实并没有我们想象的那么复杂,之前我学习jest的时候,查了较多资料,也配置了许多设置,繁忙且繁琐,直到最后我才发现,原来仅仅只需要执行一句指令即可。

vue add @vue/cli-plugin-unit-jest

9f301ee30672fb89ac44a122c19579d.png

这个命令会帮我们把相关的配置都配好,相关的依赖都装好,还会帮我们生成一个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导入导出功能。

96e2a73ff95a7aa10d0046b22e653aa.png

6、在package.json 中添加启动命令,然后通过在控制台执行npm run test:unit 进行测试(执行步骤2的时候,已经给我们默认创建)

npm run test:unit

二、jest的基本语法规则

1、jest 支持三种方式写测试代码

  1. 以 .spec.js 命名
  2. 以 .test.js 命名
  3. 放在 __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"

665ac0b4b89e0d2e6a4ba4e0b57e23b.png

  • %Stmts是语句覆盖率(statement coverage):是不是每个语句都执行了
  • %Branch分支覆盖率(branch coverage):是不是每个if代码块都执行了
  • %Funcs函数覆盖率(function coverage):是不是每个函数都调用了
  • %Lines行覆盖率(line coverage):是不是每一行都执行了

配置好并执行npm run test:unit之后,会生成一个coverage文件夹

7609b21a52a9c3cdbb49023ae74925c.png

然后打开coverage/lcov-report里面的index.html 里面会有详细的信息展示

7bec68a96dd65334515ada84d3cc50a.png 柱状条三种颜色分别代表不同比例的覆盖率(<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