React 从入门到生产（八）：测试与部署

创作者：Yardon |GitHub：github.com/YardonYan |版本：v1.0

为什么要写测试

测试是一种投资——短期成本是写代码的时间，长期回报是减少线上事故和重构恐惧。

测试金字塔：

/\ /E2E\ 少（关键路径） /------\ / 集成测试 \ 中（组件交互） /----------\ / 单元测试 \ 多（纯函数、组件、Hook） /--------------\

Vitest + Testing Library 入门

npminstall-Dvitest @testing-library/react @testing-library/jest-dom jsdom

// vitest.config.jsimport{defineConfig}from'vitest/config';exportdefaultdefineConfig({test:{environment:'jsdom',globals:true,// 无需 import describe/it/expectsetupFiles:'./test-setup.js',},});

组件测试实战

// Counter.jsx export function Counter({ initial = 0 }) { const [count, setCount] = useState(initial); return ( <div> <span>// Counter.test.jsx import { render, screen, fireEvent } from '@testing-library/react'; describe('Counter', () => { it('初始值正确', () => { render(<Counter initial={5} />); expect(screen.getByTestId('count')).toHaveTextContent('5'); }); it('点击 +1 增加', () => { render(<Counter />); fireEvent.click(screen.getByText('+1')); expect(screen.getByTestId('count')).toHaveTextContent('1'); }); it('点击 -1 减少', () => { render(<Counter initial={10} />); fireEvent.click(screen.getByText('-1')); expect(screen.getByTestId('count')).toHaveTextContent('9'); }); });

测试原则

1. 测试行为，不测试实现——如果你改了组件内部代码但行为不变，测试应该仍然通过
2. 不测试第三方库——React 是 Facebook 的责任，不是你的
3. 每个测试只验证一件事

Hook 测试

import { renderHook, act } from '@testing-library/react'; it('useCounter: increment 增加计数', () => { const { result } = renderHook(() => useCounter(0)); act(() => result.current.increment()); expect(result.current.count).toBe(1); act(() => result.current.increment()); act(() => result.current.increment()); expect(result.current.count).toBe(3); });

E2E 测试：Playwright

npminstall-D@playwright/test npx playwrightinstall

// tests/smoke.spec.jsimport{test,expect}from'@playwright/test';test('首页加载正常',async({page})=>{awaitpage.goto('http://localhost:4173');awaitexpect(page.locator('h1')).toHaveText('欢迎');});test('导航到博客页',async({page})=>{awaitpage.goto('http://localhost:4173');awaitpage.click('text=博客');awaitexpect(page).toHaveURL(/\/blog/);});

构建与部署：Vite + Nginx

vite build# 产出 dist/ 目录

server { listen 80; server_name example.com; root /var/www/react-app/dist; index index.html; location / { try_files $uri $uri/ /index.html; # SPA 路由回退 } location /assets/ { expires 1y; # 静态资源缓存一年 add_header Cache-Control "public, immutable"; } }

CI/CD 流水线

# .github/workflows/deploy.ymlname:Deployon:push:branches:[main]jobs:deploy:runs-on:ubuntu-lateststeps:-uses:actions/checkout@v4-uses:actions/setup-node@v4with:{node-version:20}-run:npm ci-run:npm run lint-run:npm run test-run:npm run build-name:Deployrun:rsync-avz dist/ user@server:/var/www/app/

系列总结

欢迎来到「React 从入门到生产」系列的终点。

回顾我们这八章走过的路：

React 不是一门需要"学完"的技术——它是一个持续进化的生态系统。真正重要的是理解它的核心范式（声明式 UI、单向数据流、组件思维），然后不断在实践中打磨。

📌创作者：Yardon | 🏠个人网站：GlimmerAI.top

📖 本章是「React 从入门到生产」系列的终章。完整 8 章已完结！

🎉 恭喜你完成了 React 学习之旅！下一路线：「FastAPI 全栈后端」——从路由设计到生产部署。欢迎大家来观看！