以下是一个使用 Jest 和 vue-test-utils 进行 Vue.js 单元测试的简单例子：
1. 安装 Jest 和 vue-test-utils：
npm install --save-dev jest vue-jest @vue/test-utils
2. 创建 Jest 配置文件：
在项目根目录下创建一个 jest.config.js 文件：
// jest.config.js
module.exports = {
preset: '@vue/cli-plugin-unit-jest',
testMatch: ['**/*.spec.js']
};
3. 编写一个简单的 Vue 组件：
<!-- HelloWorld.vue -->
<template>
<div>
<h1>{{ msg }}</h1>
<button @click="changeMsg">Change Message</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'Hello, Vue!'
};
},
methods: {
changeMsg() {
this.msg = 'New Message!';
}
}
};
</script>
<style scoped>
h1 {
color: green;
}
</style>
4. 编写 Jest 单元测试文件：
在与组件相同目录下创建一个 HelloWorld.spec.js 文件：
// HelloWorld.spec.js
import { mount } from '@vue/test-utils';
import HelloWorld from './HelloWorld.vue';
describe('HelloWorld.vue', () => {
it('renders props.msg when passed', () => {
const msg = 'Hello, Jest!';
const wrapper = mount(HelloWorld, {
propsData: { msg }
});
expect(wrapper.text()).toMatch(msg);
});
it('changes message when button is clicked', async () => {
const wrapper = mount(HelloWorld);
await wrapper.find('button').trigger('click');
expect(wrapper.text()).toContain('New Message!');
});
});
在这个例子中，我们使用 @vue/test-utils 提供的 mount 方法来创建一个组件的包装器，然后使用 Jest 的测试语法来编写两个测试用例。
5. 运行测试：
在 package.json 文件中添加以下脚本：
"scripts": {
"test": "jest"
}
然后运行测试：
npm test
这只是一个简单的单元测试示例，你可以根据你的项目需求编写更复杂的测试用例。在实际项目中，还可以使用其他工具如 Mocha、Chai 等，根据项目需要选择适合的测试工具。
转载请注明出处：http://www.zyzy.cn/article/detail/4817/Vue