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

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

安装

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("登出");
  });
});