前端单元测试

这一课你将能做到

1. 用 Vitest + Testing Library 写出组件「渲染」与「点击交互」测试，查询全走 role / 文本
2. 用 vi.mock 隔离 API 模块与 next/navigation，不打真实 backend
3. 对照 Java 侧 JUnit / Mockito，说清「测行为不测实现」在前端的具体形态

为什么要学

本站 platform 是 Next.js + React。backend 再绿，前端的状态分支（loading / error / 空列表）照样能把体验打穿：判题状态徽章把 wrong_answer 显示成 undefined，用户以为系统坏了。人话：组件测试验证用户看得见的行为——渲染了什么、点了什么、跳到哪里——而不是断言内部 useState 的变量名。

CI 里 platform job 跑 npm test（与 lint、build 并行），本课让你的本地命令与 CI 对齐。前端金字塔与 Java 同构：Vitest 组件测是底部（多），Playwright 是顶部（少，第 9 课）。运行时细节的姊妹课见 node-test。

先建立图像

用户看见的：判题徽章文案、按钮、链接目标
组件测试：  render → 查询 role/文本 → userEvent 点击 → expect
不要测：    某 state 字段名、CSS class 是否叫 foo
要 mock：   API 模块 / 路由 push / 第三方 SDK

Java 侧	前端对应
JUnit @Test	test() / it()
Mockito when(...).thenReturn(...)	vi.fn().mockResolvedValue(...)
MockMvc HTTP 契约	MSW 或 mock API 模块
Surefire 报告	Vitest reporter

Testing Library 的口号：像用户一样与页面交互——按 role、label、可见文本查询，而不是 CSS 选择器。重构 DOM 结构时行为测更抗碎，与后端「测公开行为不测私有实现」完全同构。

跟着做

步骤 1：确认与 CI 同款的测试命令

cd platform
cat package.json     # 找 "test" 脚本
npm test

若仓库尚未配置，最小安装：

npm install -D vitest @testing-library/react @testing-library/user-event @testing-library/jest-dom jsdom

vitest.config.ts 至少要有 jsdom 环境（否则报 document is not defined）：

import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  test: {
    environment: "jsdom",
    setupFiles: "./vitest.setup.ts",
  },
});

vitest.setup.ts：

import "@testing-library/jest-dom/vitest";