React 测试实践

说明

• Jest 是一个独立的 JavaScript 测试框架，负责测试运行、断言（如 expect().toBe()）和测试报告生成345。
• React Testing Library (RTL) 是一个专注于 React 组件行为测试的库，提供组件渲染、DOM 查询、用户交互模拟等功能。
• PlayWright 是由 Microsoft 开发的现代化前端自动化测试框架，专为跨浏览器、跨平台和端到端测试设计。

Jest和React Testing Library一般配合使用，需要分别安装

而PlayWright属于端到端测试，模拟用户行为更真实，适合多步骤全流程模拟

参考

• React Testing Library Tutorial： https://www.robinwieruch.de/react-testing-library/
• React Testing Library文档： https://testing-library.com/docs/react-testing-library/intro
• Jest一般报错(babel配法)： https://juejin.cn/post/6971636068915347492
• Jest文档： https://jestjs.io/zh-Hans/docs/getting-started
• window.matchMedia() not a function问题： https://jestjs.io/docs/manual-mocks
• Vite中可用的Jest+RTL全流程：https://zaferayan.medium.com/how-to-setup-jest-and-react-testing-library-in-vite-project-2600f2d04bdd

安装

Jest + React Testing Library

Jest部分：

npm install --save-dev jest jest-environment-jsdom

对typescript类型检查补充安装：

npm install --save-dev @types/jest

RTL部分：

npm install --save-dev @testing-library/react @testing-library/dom @testing-library/jest-dom react-test-renderer

• jest：测试框架24
• jest-environment-jsdom：提供浏览器环境模拟
• @testing-library/react：React 组件测试工具27
• @testing-library/dom：提供通用的 DOM 测试工具
• @testing-library/jest-dom：扩展 Jest 的 DOM 断言（如 toBeInTheDocument）47
• react-test-renderer：主要用于在不依赖真实 DOM 或原生移动环境的情况下渲染 React 组件，并生成可测试的 JavaScript 对象结构

接下来是两种配法，因为Jest不能直接处理typescript，要额外引入转换器（transformer）进行转换，svg、css、less等其他文件也是如此

第一种是使用ts-jest对js|jsx|ts|tsx进行处理
第二种则是使用Babel系列工具进行处理

ts-jest 配法

安装：

npm install --save-dev ts-jest

jest.config.ts修改如下

/**  
 * For a detailed explanation regarding each configuration property, visit: * https://jestjs.io/docs/configuration */  
import type {Config} from 'jest';  
  
const config: Config = {  
  testEnvironment: "jsdom", // 使用 jest-environment-jsdom 测试
  moduleNameMapper: {  
    "^@/(.*)$": "<rootDir>/src/$1"  // 关键配置：解析@路径，就是老生长谈的那个@ 
  },  
  transform: {  
    "^.+\\.(js|jsx|ts|tsx)$": ["ts-jest",{}],  // 使用 ts-jest 处理这些文件
  },  
};  
  
export default config;

你也可以使用ts-jest提供的命令自动修改（不过他改的是js文件）：

# 修改或生成 jest.config.js 文件
npx ts-jest config:init

注意：不能同时存在jest.config.ts和jest.config.js

tsconfig.json修改如下

{
  "compilerOptions": {    
	// ...
    "esModuleInterop": true, // 把模块互操作开了，不然会报错
    "types": [  
	  "jest",  
	  "@testing-library/jest-dom"  
	], // 把类型包含进来，不然找不到一些方法，写了这个不用写setupTest的那个引入了
    // ...
  }
}

如果你想写setupTest.ts，根目录新建这个文件加一行就行

setupTest.ts是用于 全局测试环境初始化 的 TypeScript 文件，通常用于配置测试前的通用设置、模拟依赖项或注册全局组件/插件。

import "@testing-library/jest-dom" // 全局注册这些类型

然后给jest.config.ts加上

const config: Config = {  
  // ...
  setupFiles: ['<rootDir>/setupTest.ts'],
  // ...
}

然后就可以写测试运行了（具体在后面），接下来是Babel配法

Babel 配法

先安装Babel相关工具

npm install --save-dev babel-jest @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript

建立babel.config.cjs，如果不是cjs后缀可能遇到问题，具体查看babel关于后缀的说明

module.exports = {  
  presets: [  
    "@babel/preset-env",  
    '@babel/preset-typescript',  
    ["@babel/preset-react", { runtime: "automatic" }]  
  ]  
};

jest.config.ts修改如下，跟ts-jest差不多

/**  
 * For a detailed explanation regarding each configuration property, visit: * https://jestjs.io/docs/configuration */  
import type {Config} from 'jest';  
  
const config: Config = {  
  testEnvironment: "jsdom", // 使用 jest-environment-jsdom 测试
  moduleNameMapper: {  
    "^@/(.*)$": "<rootDir>/src/$1"  // 关键配置：解析@路径，就是老生长谈的那个@ 
  },  
  transform: {  
    "^.+\\.(js|jsx|ts|tsx)$": ["babel-jest",{}],  // 使用 babel-jest 处理这些文件
  },  
};  
  
export default config;

tsconfig.json修改如下

{
  "compilerOptions": {    
	// ...
    // "esModuleInterop": false, // 保留该项默认即可，跟ts-jest要求不一样
    "types": [  
	  "jest",  
	  "@testing-library/jest-dom"  
	], // 把类型包含进来，不然找不到一些方法，写了这个不用写setupTest的那个引入了
    // ...
  }
}

然后就可以写测试运行了

运行

jest

可以自行添加到package.json里头去

TypeError: window.matchMedia is not a function

Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: jest.fn().mockImplementation(query => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(), // Deprecated
    removeListener: jest.fn(), // Deprecated
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    dispatchEvent: jest.fn(),
  })),
});

参考：https://jestjs.io/docs/en/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom

Playwright

安装（命令行交互）

npm init playwright@latest

询问你（英文）：

• 在 TypeScript 或 JavaScript 之间进行选择（默认为 TypeScript）
• 你的测试文件夹的名称（如果你的项目中已有测试文件夹，则默认为测试或 e2e）
• 添加 GitHub Actions 工作流程以轻松在 CI 上运行测试
• 安装 Playwright 浏览器（默认为 true，浏览器有点大，超过100MB）

一键直接帮你配好：

playwright.config.ts
package.json
package-lock.json
tests/
  example.spec.ts
tests-examples/
  demo-todo-app.spec.ts

运行

• 无头模式

npx playwright test
npx playwright show-report

• UI模式，打开一个窗口手把手进行测试

npx playwright test --ui

无了（Playwright配起来真轻松）

Playwright相对于Jest和RTL，更加无侵入，因为它直接浏览器跳到对应地址进行测试，因此，你甚至能在本地帮DeepSeek那个网站测一测

• 上一篇
• 下一篇