vue 官方测试工具 unit-jest 实用教程（含实战范例：登录组件的测试）

vue add unit-jest

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

// 从测试工具中导入必要的函数和类型
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