用 Vitest 配置 React Testing Library

工作流概览

你将在基于 Vite 的 React 项目中配置 React Testing Library（RTL）和 Vitest。过程约 20 分钟，只需 npm/pnpm 命令和少量配置文件修改。

第 1 步：安装依赖

pnpm add -D vitest @testing-library/react @testing-library/jest-dom \
  @testing-library/user-event jsdom @vitest/coverage-v8

在 package.json 中确认这些包出现在 devDependencies。

第 2 步：配置 Vitest

更新 vite.config.ts：

/// <reference types="vitest/config" />
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    setupFiles: ['./src/test/setup.ts'],
    globals: true,
  },
});

第 3 步：添加测试

创建 src/test/setup.ts 导入 @testing-library/jest-dom/vitest，然后写一个渲染组件并用 screen.getByRole 查询的测试。

验证配置

预期结果：pnpm vitest run 执行测试并通过，失败测试会给出可读的 DOM 断言信息，覆盖率报告生成。