以下是一个简单的示例，演示如何使用 Jest 和 @vue/test-utils 进行 Vue 3.0 组件的单元测试。
安装依赖
首先，确保你的项目已经安装了 Jest、Vue Test Utils 和其他相关的测试工具。如果你是使用 Vue CLI 创建的项目，这些工具可能已经配置好。
# 安装 Jest 和相关工具
npm install --save-dev jest @vue/test-utils vue-jest babel-jest
# 如果你使用 Babel，还需要安装 babel-core 和相关 preset
npm install --save-dev babel-core babel-jest @babel/core @babel/preset-env
# 在 package.json 中添加 Jest 的配置
# package.json
{
"scripts": {
"test": "jest"
},
"jest": {
"moduleFileExtensions": [
"js",
"jsx",
"json",
"vue"
],
"transform": {
"^.+\\.vue$": "vue-jest",
"^.+\\js$": "babel-jest"
},
"moduleNameMapper": {
"^@/(.*)$": "<rootDir>/src/$1"
}
}
}
编写测试
在 tests 目录下创建一个测试文件，比如 HelloWorld.spec.js，用于测试你的组件。
// HelloWorld.spec.js
import { mount } from '@vue/test-utils';
import HelloWorld from '@/components/HelloWorld.vue';
describe('HelloWorld.vue', () => {
it('renders props.message when passed', () => {
const message = 'Hello, Vue 3!';
const wrapper = mount(HelloWorld, {
props: { message }
});
expect(wrapper.text()).toMatch(message);
});
it('emits an event when button is clicked', async () => {
const wrapper = mount(HelloWorld);
await wrapper.find('button').trigger('click');
expect(wrapper.emitted().buttonClick).toBeTruthy();
});
});
运行测试
运行以下命令来执行你的测试：
npm test
这会启动 Jest，并运行你的测试文件。Jest 会自动查找项目中的测试文件并执行测试用例。如果你的测试通过，你将看到一个成功的输出。如果有失败的测试用例，Jest 将提供相关的信息来帮助你调试和修复问题。
这是一个简单的测试示例，你可以根据你的组件的具体情况编写更多的测试用例。Vue Test Utils 提供了丰富的 API 来模拟组件的渲染和交互行为，使得编写测试变得更加容易。
转载请注明出处：http://www.zyzy.cn/article/detail/526/Vue 3.0