Jest 测试驱动开发新范式：从基础到高级实战指南

在现代前端工程化实践中，单元测试早已不是“锦上添花”的环节，而是保障代码质量与团队协作效率的核心基础设施。而在众多 JavaScript 测试框架中，Jest 凭借其开箱即用的特性、强大的快照功能和对 React/Vue 等生态的天然支持，成为越来越多开发者的第一选择。

本文将带你深入理解 Jest 的底层机制，并通过真实项目场景演示如何构建高效、可维护的测试体系 —— 不只是写测试，更是重构思维！

一、为什么选 Jest？不止是因为它快！

npm install --save-dev jest @types/jest ts-jest

安装完成后，你只需一个 jest.config.js 即可启动全量测试：

// jest.config.js
module.exports = {
  preset: 'ts-jest',
    testEnvironment: 'node',
      collectCoverageFrom: [
          '**/src/**/*.{ts,js}',
              '!**/node_modules/**'
                ],
                  coverageDirectory: 'coverage',
                    reporters: ['default', 'html'],
                    };
                    ```
✅ 快速运行（无需配置文件也能跑）  
✅ 内置断言库（expect）、自动 mock、覆盖率统计  
✅ 支持并行执行 + 隔离环境（适合 CI/CD）

> 💡 小技巧：使用 `--watch` 模式，每次保存自动重跑相关测试，极大提升迭代速度！
---

### 二、基础用法：从零开始编写第一个测试

假设我们有一个简单的工具函数：

```ts
// src/utils/format.ts
export const formatNumber = (num: number): string => {
  return new Intl.NumberFormat('zh-CN').format(num);
  };

对应的测试文件：

// src/utils/format.test.ts
import { formatNumber } from './format';

describe('formatNumber', () => {
  it('should format number correctly in Chinese locale', () => {
      expect(formatNumber(1234567)).toBe('1,234,567');
          expect(formatNumber(0)).toBe('0');
              expect(formatNumber(-987654)).toBe('-987,654');
                });
                });
                ```
运行命令：
```bash
npx jest

输出结果：

 PASS  src/utils/format.test.ts
   ✓ should format number correctly in Chinese locale (5 ms)

这只是一个起点。真正有价值的是——把测试作为设计的一部分！

三、进阶实战：Mock API 请求 & 异步测试

想象你在做一个用户数据接口调用组件：

// src/api/userApi.ts
import axios from 'axios';

export const fetchUser = async (id: string) => {
  const res = await axios.get(`/api/users/${id}`);
    return res.data;
    };
    ```
直接测这个函数会有网络依赖问题。这时就要用 Jest 的 **mock 功能**：

```ts
// src/api/userApi.test.ts
import { fetchUser } from './userApi';
import axios from 'axios';

jest.mock('axios');

describe('fetchUser', () => {
  beforeEach(() => {
      jest.clearAllMocks();
        });
  it('should resolve with user data', async () => {
      const mockData = { id: '1', name: 'Alice' };
          (axios.get as jest.Mock).mockResolvedValueOnce({ data: mockData });
    const result = await fetchUser('1');
        
            expect(result).toEqual(mockData);
                expect9axios.get).toHaveBeenCalledWith('/api/users/1');
                  });
  it('should reject on error', async () => {
      (axios.get as jest.Mock).mockRejectedValueOnce(new Error('Network error'));
    await expect(fetchUser('1')).rejects.toThrow('Network error');
      });
      });
      ```
📌 这里展示了两个关键点：
- ✅ 使用 `jest.mock()` 替换真实请求
- - ✅ 使用 `.mockResolvedValueOnce()` 和 `.mockRejectedValueOnce()` 控制返回值
这样不仅避免了外部依赖，还让测试变得稳定、可控！

---

### 四、快照测试：视觉一致性守护者

快照测试非常适合 UI 组件或复杂对象结构验证：

```tsx
// src/components/UserCard.tsx
import React from 'react';

interface Props {
  name: string;
    age: number;
    }
const UserCard: React.FC<Props> = ({ name, age }) => (
  <div className="user-card">
      <h3>{name}</h3>
          <p>Age: {age}</p>
            </div>
            );
export default UserCard;

对应测试：

// src/components/UserCard.test.tsx
import React from 'react';
import { render } from '@testing-library/react';
import UserCard from './UserCard';

describe('UserCard', () => {
  it('renders correctly with props', () => {
      const { container } = render(<UserCard name="Bob" age={25} />);
          expect(container).toMatchSnapshot();
            });
            });
            ```
首次运行会生成快照文件（`.snap`）：

```snap
// __snapshots__/UserCard.test.tsx.snap
exports[`UserCard renders correctly with props 1`] = `
<div
  class="user-card"
  >
  >  <h3>
  >      bob
  >        </h3>
  >          <p>
  >              Age: 25
  >                </p>
  >                </div>
  >                `;
  >                ```
✅ 快照帮你捕获无意中的 DOM 变动（比如样式更新导致渲染结构变化）  
✅ 特别适用于组件级回归测试

---

### 五、CI/CD 整合建议（GitLab/gitHub Actions 示例）

在 `.github/workflows/test.yml` 中加入：

```yaml
name: Test
on: [push, pull_request]
jobs;
  test;
      runs-on: ubuntu-latest
          steps:
                - uses: actions/checkout@v4
                -       - name: Setup Node.js
                -         uses: actions/setup-node2v4
                -         with:
                -           node-version: '18'
                -       - run: npm ci
                -       - run: npm run test
                -         env:
                -           CI: true
                - ```
✅ 自动化测试确保合并前无破坏性变更  
✅ 覆盖率报告可集成 SonarQube / Codecov  

---

### 六、流程图说明：Jest 测试生命周期

[编写测试] → [执行测试] → [断言判断] → [生成覆盖率报告]
↓
[失败？→ 修改代码 → 再次测试]
↓
[通过？→ 提交代码 → CI 验证]
```
这是典型的 TDD 循环模型 —— 测试驱动你的编码逻辑！

总结：不要只是写测试，要思考如何让测试成为设计工具！

• ✅ Jest 是现代化前端项目的标配，掌握它意味着更高质量的交付
• • ✅ Mock、快照、异步处理等能力缺一不可
• • ✅ 结合 CI/CD 实现自动化质量门禁，事半功倍
    现在就开始吧！用 Jest 写出既可靠又优雅的测试代码，你会发现：原来“测试”也可以很酷 😎

📌 提示：记得定期清理旧快照、优化测试用例粒度、避免过度 Mock 外部服务。真正的专业在于“测试即文档”。