Vue 系前端测试策略

// 在配置中开启 globals 可以全局引入 vitest，不需要每个文件都写一遍 import
import { describe, expect, test } from "vitest";

const person = {
  isActive: true,
  age: 32,
};

describe("person", () => {
  test("person is defined", () => {
    expect(person).toBeDefined();
  });

  test("is active", () => {
    expect(person.isActive).toBeTruthy();
  });

  test("age limit", () => {
    expect(person.age).toBeLessThanOrEqual(32);
  });
});

import { useRoute } from 'vue-router'
vi.spyOn(exports, 'useRoute').mockReturnValue({ path: '/path' } as any)

import { useRoute } from 'vue-router'

vi.mock('vue-router', async (importOriginal) => {
  const vr = await importOriginal()
  return { ...(vr as any), useRoute: vi.fn() }
})

// mock 方法时
vi.mocked(useRoute).mockReturnValue({ path: '/system-pipeline-template' } as any)

- __mocks__
  - axios.js
- src
  __mocks__
    - increment.js
  - increment.js
- tests
  - increment.test.js

vi.stubGlobal("__VERSION__", "1.0.0");
vi.stubEnv("VITE_ENV", "staging");

const wrapper = mount(MyComponent, {
  props: {
    msg: "world",
  },
  slots: {
    default: "Default",
    first: h("h1", {}, "Named Slot"),
    second: Bar,
  },
  global: {
    plugins: [myPlugin],
  },
});

import { mount } from "@vue/test-utils";
import TodoApp from "./TodoApp.vue";

test("creates a todo", () => {
  const wrapper = mount(TodoApp, {
    global: {
      plugins: [myPlugin],
    },
  });
  expect(wrapper.findAll('[data-test="todo"]')).toHaveLength(1);

  wrapper.get('[data-test="new-todo"]').setValue("New todo");
  wrapper.get('[data-test="form"]').trigger("submit");

  expect(wrapper.findAll('[data-test="todo"]')).toHaveLength(2);
});

import { render, fireEvent, screen } from "@testing-library/vue";
import Component from "./Component.vue";

test("increments value on click", async () => {
  render(Component);

  // screen has all queries that you can use in your tests.
  // getByText returns the first matching node for the provided text, and
  // throws an error if no elements match or if more than one match is found.
  screen.getByText("Times clicked: 0");

  const button = screen.getByText("increment");

  // Dispatch a native click event to our button element.
  await fireEvent.click(button);
  await fireEvent.click(button);

  screen.getByText("Times clicked: 2");
});

const queryAllByText: AllByText = (
  container,
  text,
  {
    selector = '*',
    exact = true,
    collapseWhitespace,
    trim,
    ignore = getConfig().defaultIgnore,
    normalizer,
  } = {},
) => {
  checkContainerType(container)
  const matcher = exact ? matches : fuzzyMatches
  const matchNormalizer = makeNormalizer({collapseWhitespace, trim, normalizer})
  let baseArray: HTMLElement[] = []
  if (typeof container.matches === 'function' && container.matches(selector)) {
    baseArray = [container]
  }
  return (
    [
      ...baseArray,
      ...Array.from(container.querySelectorAll<HTMLElement>(selector)),
    ]
      // TODO: `matches` according lib.dom.d.ts can get only `string` but according our code it can handle also boolean :)
      .filter(node => !ignore || !node.matches(ignore as string))
      .filter(node => matcher(getNodeText(node), node, text, matchNormalizer))
  )
}

import { render, fireEvent, screen } from "@testing-library/vue";

fireEvent.click(node);
fireEvent.input(node, event);
fireEvent(node, event);

event = document.createEvent(EventType);
const { bubbles, cancelable, detail, ...otherInit } = eventInit;
event.initEvent(eventName, bubbles, cancelable, detail);
element.dispatchEvent(event);

npm install -D vitest @vue/test-utils @testing-library/vue jsdom

{
  "scripts": {
    "test": "vitest",
    "coverage": "vitest run --coverage"
  }
}

{
  "compilerOptions": {
    // ...
    "types": ["node", "jsdom", "vitest/globals", "@testing-library/jest-dom"]
    // ...
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

include: **/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}
exclude:  **/node_modules/**, **/dist/**, **/cypress/**, **/.{idea,git,cache,output,temp}/**, **/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*
watch exclude:  **/node_modules/**, **/dist/**

No test files found, exiting with code 1

src
  __test__
    components
      ComponentOne.spec.ts
    views
      HomeView.spec.ts
  components
    ComponentOne.vue
  views
    HomeView.vue

const checkbox = getByRole("checkbox", { name: "label" });
await fireEvent.click(checkbox);
const radio = await findByRole("radio", { name: "Y" });
await fireEvent.click(radio);