Vue 自动化测试

依赖包

经笔者验证、确定支持运行的精确版本，理论上应该支持更多的版本运行。

测试场景

组件类名状态测试

Switch

<template>
  <div class="switch" :class="{ checked }" @click="$emit('update:modelValue', !checked)">
    <div class="dot"></div>
  </div>
</template>

<script lang="ts" setup>
  import { defineModel } from "vue";

  const checked = defineModel<boolean>("modelValue", { default: false });
</script>

测试用例

import { describe, it, expect } from "vitest";
import { mount } from "@vue/test-utils";
import userEvent from "@testing-library/user-event";
import { waitFor } from "@testing-library/vue";
import Switch from "./Switch.vue";

/**
 * @vitest-environment jsdom
 */
describe("should toggle switch correctly", async () => {
  const wrapper = mount(Switch, {
    props: {
      modelValue: false,
    },
    attrs: {
      "onUpdate:modelValue": (value: boolean) => wrapper.setProps({ modelValue: value }),
    },
  });
  const radioContainer = wrapper.find(".switch");

  it("Default status", (a) => {
    expect(radioContainer.classes()).not.toContain("checked");
  });

  it("Open Switch", async () => {
    await userEvent.click(radioContainer.element);
    await waitFor(() => {
      expect(wrapper.find(".switch").classes()).toContain("checked");
    });
  });

  it("Close Switch", async () => {
    await userEvent.click(radioContainer.element);
    await waitFor(() => {
      expect(radioContainer.classes()).not.toContain("checked");
    });
  });
});

参考仓库：https://github.com/alex-reinfoce/vue-test