JavaScript 测试策略与最佳实践

        /\
       /E2E\         少量（约 10%）：慢、贵、脆弱，但最接近真实用户
      /------\
     /  集成  \       适量（约 20%）：验证模块协作
    /----------\
   /   单元测试  \     大量（约 70%）：快、稳、便宜
  /--------------\

// 相等性
expect(2 + 2).toBe(4);                    // 严格相等（Object.is）
expect({ a: 1 }).toEqual({ a: 1 });       // 深度相等
expect({ a: 1, b: 2 }).toMatchObject({ a: 1 }); // 部分匹配

// 真值判断
expect(value).toBeTruthy();
expect(value).toBeNull();
expect(value).toBeUndefined();
expect(value).toBeDefined();

// 数值
expect(0.1 + 0.2).toBeCloseTo(0.3);       // 浮点数比较必用
expect(10).toBeGreaterThan(5);

// 字符串 / 数组 / 对象
expect('hello world').toContain('world');
expect(['a', 'b']).toContain('a');
expect([1, 2, 3]).toHaveLength(3);
expect({ name: 'Alice' }).toHaveProperty('name');

// 异常
expect(() => { throw new Error('boom'); }).toThrow('boom');

// 取反
expect(1 + 1).not.toBe(3);

// math.js
export function sum(a, b) {
  return a + b;
}

export function divide(a, b) {
  if (b === 0) throw new Error('除数不能为 0');
  return a / b;
}

// math.test.js
import { sum, divide } from './math';

describe('sum 函数', () => {
  test('两个正数相加', () => {
    expect(sum(1, 2)).toBe(3);
  });

  test('处理负数', () => {
    expect(sum(-1, -2)).toBe(-3);
  });

  test('处理零', () => {
    expect(sum(0, 0)).toBe(0);
  });
});

describe('divide 函数', () => {
  test('正常除法', () => {
    expect(divide(10, 2)).toBe(5);
  });

  // 边界与异常测试往往比正常路径更重要
  test('除数为 0 时抛出错误', () => {
    expect(() => divide(10, 0)).toThrow('除数不能为 0');
  });
});

test('购物车计算总价', () => {
  // Arrange：准备数据和环境
  const cart = new Cart();
  cart.add({ name: '书', price: 50, qty: 2 });
  cart.add({ name: '笔', price: 10, qty: 3 });

  // Act：执行被测行为
  const total = cart.getTotal();

  // Assert：验证结果
  expect(total).toBe(130);
});

// 被测代码
async function fetchUser(id) {
  const res = await fetch(`/api/users/${id}`);
  if (!res.ok) throw new Error('用户不存在');
  return res.json();
}

// 正确写法：async/await
test('成功获取用户', async () => {
  const user = await fetchUser(1);
  expect(user.name).toBe('Alice');
});

// 测试异步异常
test('用户不存在时抛错', async () => {
  await expect(fetchUser(999)).rejects.toThrow('用户不存在');
});

// resolves / rejects 匹配器
test('Promise 解析出正确值', async () => {
  await expect(Promise.resolve('ok')).resolves.toBe('ok');
});

// 1. 模拟一个函数并断言调用
test('回调被正确调用', () => {
  const callback = jest.fn();
  [1, 2, 3].forEach(callback);

  expect(callback).toHaveBeenCalledTimes(3);
  expect(callback).toHaveBeenCalledWith(2, 1, [1, 2, 3]);
});

// 2. 模拟整个模块
jest.mock('./api');
import { getData } from './api';

test('使用 mock 的 API', async () => {
  getData.mockResolvedValue({ id: 1, name: 'Mock' });
  const result = await getData();
  expect(result.name).toBe('Mock');
});

// 3. 模拟定时器（避免真的等待）
test('防抖函数只触发一次', () => {
  jest.useFakeTimers();
  const fn = jest.fn();
  const debounced = debounce(fn, 1000);

  debounced();
  debounced();
  debounced();

  jest.advanceTimersByTime(1000); // 快进时间
  expect(fn).toHaveBeenCalledTimes(1);
  jest.useRealTimers();
});

import { http, HttpResponse } from 'msw';
import { setupServer } from 'msw/node';

const server = setupServer(
  http.get('/api/users/:id', ({ params }) => {
    return HttpResponse.json({ id: params.id, name: 'Alice' });
  })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

test('从 API 获取用户', async () => {
  const user = await fetchUser(1);
  expect(user.name).toBe('Alice');
});

import { render, screen, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Button from './Button';
import Counter from './Counter';

test('Button 渲染文本', () => {
  render(<Button>点击我</Button>);
  expect(screen.getByText('点击我')).toBeInTheDocument();
});

test('Button 点击时触发 onClick', () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick}>点击我</Button>);
  fireEvent.click(screen.getByText('点击我'));
  expect(handleClick).toHaveBeenCalledTimes(1);
});

// 用 userEvent 模拟更真实的用户交互
test('计数器点击后数字增加', async () => {
  const user = userEvent.setup();
  render(<Counter />);

  const button = screen.getByRole('button', { name: /增加/i });
  await user.click(button);
  await user.click(button);

  expect(screen.getByText('当前计数：2')).toBeInTheDocument();
});

import { test, expect } from '@playwright/test';

test('用户登录流程', async ({ page }) => {
  await page.goto('https://example.com/login');

  await page.fill('input[name="email"]', 'alice@example.com');
  await page.fill('input[name="password"]', 'secret123');
  await page.click('button[type="submit"]');

  // Playwright 自动等待元素出现，无需手动 sleep
  await expect(page).toHaveURL(/dashboard/);
  await expect(page.getByText('欢迎，Alice')).toBeVisible();
});

# Jest 生成覆盖率报告
jest --coverage

# Vitest 生成覆盖率报告
vitest run --coverage

describe('优惠券计算边界', () => {
  test('优惠金额不应使总价为负', () => {
    const order = { amount: 30 };
    const coupon = { discount: 50 };
    const finalPrice = applyCoupon(order, coupon);
    expect(finalPrice).toBeGreaterThanOrEqual(0);
    expect(finalPrice).toBe(0); // 封底为 0，而非 -20
  });
});

describe('用户服务', () => {
  let db;

  beforeAll(async () => {
    // 整个 describe 只运行一次：建立数据库连接等昂贵操作
    db = await connectTestDB();
  });

  beforeEach(async () => {
    // 每个 test 前运行：重置数据，保证测试隔离
    await db.reset();
    await db.seed({ users: [{ id: 1, name: 'Alice' }] });
  });

  afterEach(() => {
    // 每个 test 后运行：清理副作用，如恢复 mock
    jest.restoreAllMocks();
  });

  afterAll(async () => {
    // 整个 describe 结束后运行一次：关闭连接、释放资源
    await db.close();
  });

  test('查询用户', async () => {
    const user = await getUser(db, 1);
    expect(user.name).toBe('Alice');
  });
});
// 执行顺序：beforeAll → (beforeEach → test → afterEach) × N → afterAll

// Jest / Vitest 的 test.each
describe('isEmail 校验', () => {
  test.each([
    ['alice@example.com', true],
    ['bad-email', false],
    ['a@b.co', true],
    ['@nodomain.com', false],
    ['', false],
  ])('isEmail(%s) 应返回 %s', (input, expected) => {
    expect(isEmail(input)).toBe(expected);
  });
});

// 也支持对象数组 + 模板字符串，可读性更好
test.each([
  { a: 1, b: 2, sum: 3 },
  { a: -1, b: 1, sum: 0 },
  { a: 0, b: 0, sum: 0 },
])('sum($a, $b) = $sum', ({ a, b, sum }) => {
  expect(add(a, b)).toBe(sum);
});

test('用户卡片渲染结构', () => {
  const { container } = render(<UserCard user={{ name: 'Alice', role: 'admin' }} />);
  expect(container).toMatchSnapshot();
});

// 内联快照：把快照直接写进测试文件，小对象更直观
test('格式化配置', () => {
  expect(formatConfig({ port: 8080 })).toMatchInlineSnapshot(`
    "port=8080"
  `);
});

// Spy：监视真实方法是否被调用，但不改变其行为
const spy = jest.spyOn(console, 'log');
logMessage('hello');
expect(spy).toHaveBeenCalledWith('[INFO] hello');
spy.mockRestore();

// Stub：替换实现返回固定值
const getConfig = jest.fn().mockReturnValue({ theme: 'dark' });

// Mock：设定期望并断言交互
const mailer = { send: jest.fn() };
notifyUser(mailer, user);
expect(mailer.send).toHaveBeenCalledTimes(1);
expect(mailer.send).toHaveBeenCalledWith('alice@example.com', expect.any(String));

// 查询优先级（从高到低）：
// 1. getByRole —— 最推荐，贴近辅助技术
screen.getByRole('button', { name: /提交/i });
screen.getByRole('heading', { level: 1 });
// 2. getByLabelText —— 表单元素首选
screen.getByLabelText('用户名');
// 3. getByPlaceholderText / getByText
screen.getByText('欢迎回来');
// 4. getByTestId —— 兜底，前面都不行时才用
screen.getByTestId('custom-widget');

// getBy 找不到会抛错；queryBy 找不到返回 null（用于断言"不存在"）
expect(screen.queryByText('错误提示')).not.toBeInTheDocument();
// findBy 返回 Promise，用于等待异步出现的元素
expect(await screen.findByText('加载完成')).toBeInTheDocument();

// 1. 假定时器
test('轮询每 5 秒触发一次', () => {
  jest.useFakeTimers();
  const cb = jest.fn();
  startPolling(cb, 5000);
  jest.advanceTimersByTime(15000); // 快进 15 秒
  expect(cb).toHaveBeenCalledTimes(3);
  jest.useRealTimers();
});

// 2. 固定系统时间
test('生成的时间戳固定', () => {
  jest.useFakeTimers().setSystemTime(new Date('2026-01-01T00:00:00Z'));
  expect(createRecord().createdAt).toBe('2026-01-01T00:00:00.000Z');
  jest.useRealTimers();
});

// 3. 固定随机数
test('抽奖结果可预测', () => {
  jest.spyOn(Math, 'random').mockReturnValue(0.42);
  expect(drawLottery()).toBe('三等奖');
});

import request from 'supertest';
import { app } from './app';
import { db } from './db';

describe('POST /api/users', () => {
  beforeEach(() => db.reset());

  test('成功创建用户返回 201', async () => {
    const res = await request(app)
      .post('/api/users')
      .send({ name: 'Bob', email: 'bob@example.com' });

    expect(res.status).toBe(201);
    expect(res.body).toMatchObject({ name: 'Bob' });
    // 验证真的写进了库
    const saved = await db.users.findByEmail('bob@example.com');
    expect(saved).not.toBeNull();
  });

  test('缺少邮箱返回 400', async () => {
    const res = await request(app).post('/api/users').send({ name: 'Bob' });
    expect(res.status).toBe(400);
  });
});

// 第 1 步 红：先写一个必然失败的测试
test('3 的倍数返回 Fizz', () => {
  expect(fizzbuzz(3)).toBe('Fizz'); // fizzbuzz 还不存在，测试报红
});

// 第 2 步 绿：写最简实现让它通过
function fizzbuzz(n) {
  if (n % 3 === 0) return 'Fizz';
  return String(n);
}

// 第 3 步 加测试逼出更多逻辑
test('5 的倍数返回 Buzz', () => expect(fizzbuzz(5)).toBe('Buzz'));
test('15 的倍数返回 FizzBuzz', () => expect(fizzbuzz(15)).toBe('FizzBuzz'));

// 第 4 步 重构：在测试保护下放心整理代码
function fizzbuzz(n) {
  let out = '';
  if (n % 3 === 0) out += 'Fizz';
  if (n % 5 === 0) out += 'Buzz';
  return out || String(n);
}

# GitHub Actions 示例：每次 PR 自动跑测试并卡覆盖率
name: test
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20, cache: npm }
      - run: npm ci
      - run: npm run lint
      - run: npm test -- --coverage --ci

// jest.config.js
export default {
  coverageThreshold: {
    global: { branches: 80, functions: 80, lines: 85, statements: 85 },
  },
};