在 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：

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 组件：

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
更多示例
示例一：隐藏消息组件
组件代码：