你改了一行代码，手动点了一遍页面，觉得没问题就上线了。结果用户反馈“登录按钮点不动了”。你心里咯噔：我根本没改登录相关代码啊。今天我们来给你的代码装一把“智能门锁”——单元测试。用 Jest + Testing Library，把常见 Bug 锁在门外，让你改代码时不再心惊胆战。
前言
很多前端对测试的态度是：项目那么赶，哪有时间写测试？结果修 Bug 的时间比写代码还多。你花 20 分钟写的测试，可能帮你省掉 2 小时的通宵排查。
测试不是“额外工作”，而是安全网。当你需要重构、升级依赖、添加新功能时，测试全绿的那一刻，比中彩票还安心。今天我们用 Jest（测试框架）+ Testing Library（渲染组件、模拟用户操作），从零开始给你的 React 项目写第一个测试。不搞复杂概念，只写最实用的断言。
一、Jest 是啥？Testing Library 又是啥？
- Jest：Facebook 出的测试框架，内置断言、模拟函数、覆盖率报告。开箱即用，零配置。
- Testing Library：一套帮助你“像用户一样测试”的工具。不测试组件内部 state 或 props，只测试用户能看到和能操作的。
核心原则：测试越接近用户的使用方式，越能给你信心。不要测试实现细节（比如某个函数被调用了几次、某个 state 变了），要测试 UI 上出现了什么、点击后发生了什么变化。
二、环境搭建（Create React App 用户）
如果你用 CRA，Jest 和 Testing Library 已经内置，直接写就行。Vite 用户需要手动安装：
1npm install -D jest @testing-library/react @testing-library/jest-dom @testing-library/user-event vitest 2# 如果用 Vitest（Vite 推荐），配置略不同。这里我们用 Jest 示范 3
配置 jest.config.js：
1module.exports = { 2 testEnvironment: 'jsdom', 3 setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'], 4}; 5
src/setupTests.js：
1import '@testing-library/jest-dom'; 2
三、第一个测试：测试一个纯函数
测试最简单的工具函数，是入门的绝佳方式。比如 utils/formatPrice.js：
1export function formatPrice(price, currency = '¥') { 2 return `${currency}${price.toFixed(2)}`; 3} 4
写测试 utils/formatPrice.test.js：
1import { formatPrice } from './formatPrice'; 2 3test('格式化价格带默认货币符号', () => { 4 expect(formatPrice(10.5)).toBe('¥10.50'); 5}); 6 7test('支持自定义货币符号', () => { 8 expect(formatPrice(10.5, '$')).toBe('$10.50'); 9}); 10
运行 npm test，看到绿色通过。这类测试跑得快，你应该写很多。
四、测试 React 组件：渲染与交互
假设我们有一个 Counter 组件：
1import { useState } from 'react'; 2 3export function Counter() { 4 const [count, setCount] = useState(0); 5 return ( 6 <div> 7 <p>计数: {count}</p> 8 <button onClick={() => setCount(count + 1)}>增加</button> 9 </div> 10 ); 11} 12
写测试 Counter.test.jsx：
1import { render, screen } from '@testing-library/react'; 2import userEvent from '@testing-library/user-event'; 3import { Counter } from './Counter'; 4 5test('渲染初始计数为0', () => { 6 render(<Counter />); 7 const countElement = screen.getByText(/计数: 0/i); 8 expect(countElement).toBeInTheDocument(); 9}); 10 11test('点击按钮后计数增加', async () => { 12 const user = userEvent.setup(); 13 render(<Counter />); 14 const button = screen.getByRole('button', { name: /增加/i }); 15 await user.click(button); 16 expect(screen.getByText(/计数: 1/i)).toBeInTheDocument(); 17}); 18
注意：
screen.getByRole比getByText更语义化，推荐优先使用。userEvent模拟真实点击（会触发 focus、blur 等），比fireEvent更接近用户。
五、测试异步操作：比如数据加载
一个显示用户列表的组件，从 API 获取数据：
1import { useEffect, useState } from 'react'; 2 3export function UserList() { 4 const [users, setUsers] = useState([]); 5 useEffect(() => { 6 fetch('/api/users') 7 .then(res => res.json()) 8 .then(setUsers); 9 }, []); 10 return ( 11 <ul> 12 {users.map(user => <li key={user.id}>{user.name}</li>)} 13 </ul> 14 ); 15} 16
测试时需要 mock fetch：
1import { render, screen, waitFor } from '@testing-library/react'; 2import { UserList } from './UserList'; 3 4global.fetch = jest.fn(() => 5 Promise.resolve({ 6 json: () => Promise.resolve([{ id: 1, name: '张三' }, { id: 2, name: '李四' }]), 7 }) 8); 9 10test('加载并显示用户列表', async () => { 11 render(<UserList />); 12 // 等待数据加载完成 13 await waitFor(() => { 14 expect(screen.getByText('张三')).toBeInTheDocument(); 15 expect(screen.getByText('李四')).toBeInTheDocument(); 16 }); 17}); 18
六、覆盖率：别盲目追求 100%
运行 npm test -- --coverage，会生成覆盖率报告。但记住：100% 覆盖率不代表没有 Bug。覆盖率低的地方可能是关键逻辑，需要补测试；但有些样板代码（如常量定义、简单 getter）不测也罢。重点覆盖业务逻辑和复杂交互。
七、测试最佳实践
- 测试行为，不测试实现：不要测试组件内部 state 的值（除非必要），而是测试渲染结果。
- 一个测试只断言一件事：一个
test里可以有多个expect，但最好只测一个行为。 - 模拟外部依赖：网络请求、localStorage、计时器都要模拟，避免测试不稳定。
- 避免测试快照：快照测试（
toMatchSnapshot）容易产生大而脆弱的文件，改个空格就挂。优先用断言。 - 让测试快速：单元测试应该在几秒内跑完，如果慢，检查是否有真实网络请求或大量渲染。
八、持续集成：让测试自动跑起来
把测试放到 GitHub Actions 里（上篇文章的内容）。每次 PR 自动跑测试，不通过不让合并。这样团队协作时，队友的改动不会悄悄破坏你的代码。
1name: Test 2on: [push, pull_request] 3jobs: 4 test: 5 runs-on: ubuntu-latest 6 steps: 7 - uses: actions/checkout@v4 8 - uses: actions/setup-node@v4 9 with: 10 node-version: 18 11 - run: npm ci 12 - run: npm test 13
九、总结：测试是给未来的自己写信
- 写测试一开始会慢，但能让你后期“闭着眼睛改代码”。
- Jest + Testing Library 是 React 社区标准，Vue/Vite 对应 Vitest + Testing Library。
- 不要被“测试种类太多”吓到，从纯函数和简单组件开始，逐步扩大覆盖。
下次你改了代码，测试全绿，你就可以自信地 push。那种感觉，比手动点一百遍页面踏实多了。
如果你觉得今天的“智能门锁”够踏实，点个赞让更多人看到。评论区聊聊：你被上线后突然出现的 Bug 坑过吗？
《你写的代码没有测试，就像出门不锁门——Jest + Testing Library 从入门到不慌》 是转载文章，点击查看原文。
