Jest进阶:测试 Vue 组件

简介: Jest进阶:测试 Vue 组件

在 Vue 项目中,测试组件是确保应用质量和稳定性的关键步骤。Vue Test Utils 是一个专门为 Vue.js 应用程序编写的单元测试和集成测试工具库。它提供了丰富的 API,帮助开发者模拟用户操作、查询组件和断言测试结果,从而在不需要手动操作应用程序的情况下自动化地测试 Vue 组件的行为和交互。

安装 Vue Test Utils
首先,确保你已经安装了 Vue Test Utils。根据你使用的 Vue 版本,安装相应的 Vue Test Utils 版本:

Vue 2:

npm install @vue/test-utils@1 --save-dev
1
Vue 3:

npm install @vue/test-utils@next --save-dev
1
快速上手
假设我们有一个简单的 Vue 组件 HelloWorld.vue:



{ { msg }}



1 2 3 4 5 6 7 8 9 10 11 12 13 14 接下来,我们编写测试代码: 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); }); }); 1 2 3 4 5 6 7 8 9 10 11 12 在这个测试中,我们使用 shallowMount 渲染 HelloWorld 组件,并传递 msg 属性。然后,我们使用 expect 断言组件的文本内容是否包含传递的 msg。 常用 API Vue Test Utils 提供了许多有用的 API,以下是一些常用的 API: find(selector): 查找匹配选择器的第一个元素。 findAll(selector): 查找匹配选择器的所有元素。 trigger(eventType, eventData): 触发组件的事件。 setProps(props): 设置组件的属性。 setData(data): 设置组件的数据。 text(): 获取组件的文本内容。 html(): 获取组件的 HTML 代码。 示例:测试 TodoList 组件 假设我们有一个 TodoList.vue 组件:
{ { todo.text }}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
接下来,我们编写测试代码:

import { shallowMount } from '@vue/test-utils';
import TodoList from '@/components/TodoList.vue';

test('测试新增待办事项', async () => {
const wrapper = shallowMount(TodoList);
const todo = wrapper.get('[data-test="todo"]');
expect(todo.text()).toBe('Learn Vue.js 3');

// 模拟新增待办事项
await wrapper.get('[data-test="new-todo"]').setValue('New To Do Item');
await wrapper.get('[data-test="form"]').trigger('submit');

// 断言新增的待办事项
expect(wrapper.findAll('[data-test="todo"]')).toHaveLength(2);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
测试快照
生成测试快照代码如下:

expect(wrapper.element).toMatchSnapshot();
1
配置 Jest
如果你使用的是 Vue CLI 创建的项目,默认配置的 Jest 只检查 .spec 文件。如果想要检测 .test 类型的文件,需要在 jest.config.js 中进行配置:

module.exports = {
// ...
testMatch: [
'/tests//.[jt]s?(x)',
'**/?(
.)+(spec|test).[jt]s?(x)'
]
};
1
2
3
4
5
6
7
更多示例
示例一:隐藏消息组件
组件代码:



显示说明





相关文章
|
1月前
|
前端开发 数据管理 测试技术
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第27天】本文介绍了前端自动化测试中Jest和Cypress的实战应用与最佳实践。Jest适合React应用的单元测试和快照测试,Cypress则擅长端到端测试,模拟用户交互。通过结合使用这两种工具,可以有效提升代码质量和开发效率。最佳实践包括单元测试与集成测试结合、快照测试、并行执行、代码覆盖率分析、测试环境管理和测试数据管理。
53 2
|
1月前
|
前端开发 JavaScript 数据可视化
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第26天】前端自动化测试在现代软件开发中至关重要,Jest和Cypress分别是单元测试和端到端测试的流行工具。本文通过解答一系列问题,介绍Jest与Cypress的实战应用与最佳实践,帮助开发者提高测试效率和代码质量。
33 2
|
1月前
|
前端开发 JavaScript 安全
学习如何为 React 组件编写测试:
学习如何为 React 组件编写测试:
37 2
|
1月前
|
前端开发 JavaScript 测试技术
React 模拟测试与 Jest
【10月更文挑战第21天】本文介绍了如何使用 Jest 进行 React 组件的单元测试和模拟测试,涵盖了基础概念、常见问题及解决方案,并提供了实践案例。通过学习本文,你将掌握如何有效地使用 Jest 提高代码质量和稳定性。
41 1
|
3月前
|
JavaScript 测试技术 Windows
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
本文介绍了如何使用vue-cli和webpack为Vue项目配置不同的生产和测试环境,包括修改`package.json`脚本、使用`cross-env`处理环境变量、创建不同环境的`.env`文件,并在`webpack.prod.conf.js`中使用`DefinePlugin`来应用这些环境变量。
123 2
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
|
2月前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
490 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
2月前
|
JavaScript
vue尚品汇商城项目-day07【55.编码测试与打包发布项目】
vue尚品汇商城项目-day07【55.编码测试与打包发布项目】
31 3
|
3月前
|
JavaScript 测试技术
vue配置生产环境.env.production、测试环境.env.development
该文章介绍了如何在Vue项目中配置和使用不同的环境变量文件(.env、.env.production、.env.development)以适应开发、测试和生产环境,并通过修改`package.json`中的scripts来实现不同环境的打包。
560 0
vue配置生产环境.env.production、测试环境.env.development
|
2月前
|
JavaScript 前端开发 API
vue尚品汇商城项目-day02【9.Home组件拆分+10.postman测试接口】
vue尚品汇商城项目-day02【9.Home组件拆分+10.postman测试接口】
41 0
|
21天前
|
JSON Java 测试技术
SpringCloud2023实战之接口服务测试工具SpringBootTest
SpringBootTest同时集成了JUnit Jupiter、AssertJ、Hamcrest测试辅助库,使得更容易编写但愿测试代码。
53 3