Vue Test Utils 教程
1. 概述
Vue Test Utils 是 Vue.js 官方提供的测试工具库，用于编写和运行 Vue 组件的单元测试。它提供了一系列的 API，帮助开发者模拟用户交互、检查组件状态、以及验证组件的行为。
2. 安装和配置
2.1 安装 Vue Test Utils
首先，确保你已经安装了 Vue CLI 或 Vite，然后通过 npm 或 yarn 安装 Vue Test Utils：
npm install @vue/test-utils --save-dev
或者使用 yarn：
yarn add @vue/test-utils --dev
2.2 配置测试环境
在项目根目录下创建一个 jest.config.js 文件，配置 Jest 以支持 Vue 组件的测试：
module.exports = {
preset: '@vue/cli-plugin-unit-jest',
transform: {
'^.+\\.vue$': 'vue-jest'
}
};
3. 编写第一个测试
3.1 创建一个简单的 Vue 组件
假设我们有一个简单的计数器组件 Counter.vue：
<template>
<div>
<p>{{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
};
},
methods: {
increment() {
this.count++;
}
}
};
</script>
3.2 编写测试文件
在 tests/unit/ 目录下创建一个 Counter.spec.js 文件：
import { mount } from '@vue/test-utils';
import Counter from '@/components/Counter.vue';
describe('Counter.vue', () => {
it('初始计数为 0', () => {
const wrapper = mount(Counter);
expect(wrapper.text()).toContain('0');
});
it('点击按钮后计数增加', async () => {
const wrapper = mount(Counter);
await wrapper.find('button').trigger('click');
expect(wrapper.text()).toContain('1');
});
});
3.3 运行测试
在终端中运行以下命令来执行测试：
npm run test:unit
或者使用 yarn：
yarn test:unit
4. 常用 API 介绍
4.1 mount 和 shallowMount
mount：渲染组件及其所有子组件。shallowMount：仅渲染当前组件，不渲染子组件。
4.2 选择器
find：通过选择器查找元素。findAll：查找所有匹配的元素。
4.3 交互
trigger：触发元素的事件（如点击、输入等）。setData：设置组件的数据。
4.4 断言
text：获取元素的文本内容。html：获取元素的 HTML 内容。props：获取组件的 props。
5. 实践练习
5.1 练习：测试表单组件
创建一个简单的表单组件 Form.vue：
<template>
<form @submit.prevent="submitForm">
<input v-model="name" placeholder="Name" />
<button type="submit">Submit</button>
</form>
</template>
<script>
export default {
data() {
return {
name: ''
};
},
methods: {
submitForm() {
this.$emit('submit', this.name);
}
}
};
</script>
编写测试文件 Form.spec.js：
import { mount } from '@vue/test-utils';
import Form from '@/components/Form.vue';
describe('Form.vue', () => {
it('表单提交时触发 submit 事件', async () => {
const wrapper = mount(Form);
await wrapper.find('input').setValue('John Doe');
await wrapper.find('button').trigger('submit');
expect(wrapper.emitted().submit[0]).toEqual(['John Doe']);
});
});
5.2 练习：测试计算属性
创建一个包含计算属性的组件 Computed.vue：
<template>
<div>
<p>{{ fullName }}</p>
</div>
</template>
<script>
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
};
},
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`;
}
}
};
</script>
编写测试文件 Computed.spec.js：
import { mount } from '@vue/test-utils';
import Computed from '@/components/Computed.vue';
describe('Computed.vue', () => {
it('计算属性 fullName 正确显示', () => {
const wrapper = mount(Computed);
expect(wrapper.text()).toContain('John Doe');
});
});
6. 总结
通过本教程，你已经学会了如何使用 Vue Test Utils 编写和运行 Vue 组件的单元测试。从安装配置到编写测试用例，再到实践练习，你已经掌握了基本的测试技能。继续深入学习，你将能够编写更复杂、更全面的测试，确保你的 Vue 应用的稳定性和可靠性。
7. 进一步学习资源
希望本教程对你有所帮助，祝你在 Vue.js 的测试之旅中取得成功！