安装
vue add unit-jest
实战范例：登录组件的测试
src\views\Login.vue
<template> <div v-if="isLogin"> <p>欢迎你，{{ userName }}</p> <button @click="$emit('logout', false)">登出</button> </div> <button v-else @click="$emit('login', true)">登录</button> </template> <script setup lang="ts"> import { defineProps } from "vue"; defineProps(["isLogin", "userName"]); </script>
tests\unit\example.spec.ts
此文件在安装测试工具后会自动生成，内部代码自行编写。
具体用法，详见注释：
（底层实现使用的 jest，不太理解的地方可参考 jest 教程）
// 从测试工具中导入必要的函数和类型 import { shallowMount, VueWrapper } from "@vue/test-utils"; // 导入要测试的组件 import Login from "@/views/Login.vue"; // 声明变量 wrapper 和其类型 let wrapper: VueWrapper<any>; // 描述要测试的单元内容 describe("Login.vue", () => { // 在所有测试案例之前执行 beforeAll ， beforeAll(() => { // 挂载渲染组件 shallowMount 第一个参数为组件，第二个参数为配置信息，如传入组件的 props wrapper = shallowMount(Login, { props: { isLogin: false, }, }); }); // 测试案例1 it("测试未登录时，显示登录按钮", () => { // 打印页面最终渲染的html console.log(wrapper.html()); // 判定页面中 button 标签内的文字为 "登录" expect(wrapper.get("button").text()).toBe("登录"); }); // 测试案例2 it("测试登录后，显示登出按钮", async () => { // 用 setProps 改变传入组件的props，使用 async await 实现异步等待页面重新渲染 await wrapper.setProps({ isLogin: true, userName: "朝阳", }); console.log(wrapper.html()); // 判定页面中 button 标签内的文字为 "登出" expect(wrapper.get("button").text()).toBe("登出"); }); });
执行测试
即
npm run test:unit
测试结果
