Vue3项目实践jest，学会了升职加薪（上篇）

本文链接：https://blog.youkuaiyun.com/Android062005/article/details/127182666

本文介绍了如何在Vue3项目中集成和配置jest，包括从创建项目到设置jest配置、创建测试目录和文件，以及解决es6导入问题。此外，还详细讲解了jest的基本语法，如测试结构、mock方法、覆盖率指标和常用API，帮助开发者快速掌握jest在Vue项目中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 支持三种方式写测试代码

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"

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

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

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

好的测试覆盖率标准：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数据