前端测试体系：单测、组件测试与端到端的分层实践

// money.ts
export function formatCents(cents: number): string {
  if (!Number.isInteger(cents)) throw new RangeError("cents 必须是整数");
  const sign = cents < 0 ? "-" : "";
  const abs = Math.abs(cents);
  return `${sign}${Math.floor(abs / 100)}.${String(abs % 100).padStart(2, "0")}`;
}

// money.test.ts
import { describe, it, expect } from "vitest";
import { formatCents } from "./money";

describe("formatCents", () => {
  it("格式化常规金额", () => {
    expect(formatCents(12345)).toBe("123.45");
  });

  it("补齐分位", () => {
    expect(formatCents(5)).toBe("0.05");
  });

  it("负数带符号", () => {
    expect(formatCents(-100)).toBe("-1.00");
  });

  it("非法输入抛错", () => {
    expect(() => formatCents(1.5)).toThrow(RangeError);
  });
});

import { renderHook, act } from "@testing-library/react";
import { useCounter } from "./useCounter";

it("每次递增且可重置", () => {
  const { result } = renderHook(() => useCounter(5));
  act(() => result.current.inc());
  act(() => result.current.inc());
  expect(result.current.count).toBe(7);
  act(() => result.current.reset());
  expect(result.current.count).toBe(5);
});

import { useCounter } from "./useCounter";

it("递增逻辑", () => {
  const { count, inc } = useCounter(5);
  expect(count.value).toBe(5);
  inc();
  expect(count.value).toBe(6);
});

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { TodoList } from "./TodoList";

it("添加任务后出现在列表中", async () => {
  const user = userEvent.setup();
  render(<TodoList />);

  const input = screen.getByRole("textbox", { name: /新增任务/ });
  await user.type(input, "整理周报");
  await user.click(screen.getByRole("button", { name: "添加" }));

  expect(screen.getByRole("listitem", { name: /整理周报/ })).toBeVisible();
});

it("空输入不产生任务", async () => {
  const user = userEvent.setup();
  render(<TodoList />);
  await user.click(screen.getByRole("button", { name: "添加" }));
  expect(screen.queryByRole("listitem")).toBeNull();   // queryBy 用于断言不存在
});

import { test, expect } from "@playwright/test";

test("搜索并打开结果", async ({ page }) => {
  await page.goto("/search");

  // 正确：web-first 断言自动重试直到条件满足或超时
  await expect(page.getByRole("heading", { name: "搜索结果" })).toBeVisible();

  await page.getByRole("textbox", { name: "搜索" }).fill("playwright");
  await page.getByRole("button", { name: "搜索" }).click();

  // 正确：断言终态，而不是断言中间 loading 出现过
  await expect(page.getByRole("link", { name: /官方文档/ })).toBeVisible();
});

import { http, HttpResponse } from "msw";
import { setupServer } from "msw/node";

const server = setupServer(
  http.get("/api/items", () => {
    return HttpResponse.json([{ id: "1", name: "笔记本" }]);
  }),
  http.post("/api/items", () => {
    return new HttpResponse(null, { status: 500 });   // 测错误分支：真实响应码
  }),
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());