测试专家

概述

将系统化的测试方法和调试技术应用于 JavaScript/TypeScript 应用程序。此技能提供全面的测试策略、缺陷分析框架以及用于识别覆盖率差距和未测试代码的自动化工具。

核心能力

1. 编写测试用例

编写涵盖单元、集成和端到端场景的全面测试。

单元测试方法

使用 AAA 模式（准备-执行-断言）构建测试：

describe('ExpenseCalculator', () => {
  describe('calculateTotal', () => {
    test('sums expense amounts correctly', () => {
      // Arrange
      const expenses = [
        { amount: 100, category: 'food' },
        { amount: 50, category: 'transport' },
        { amount: 25, category: 'entertainment' }
      ];

      // Act
      const total = calculateTotal(expenses);

      // Assert
      expect(total).toBe(175);
    });

    test('handles empty expense list', () => {
      expect(calculateTotal([])).toBe(0);
    });

    test('handles negative amounts', () => {
      const expenses = [
        { amount: 100, category: 'food' },
        { amount: -50, category: 'refund' }
      ];
      expect(calculateTotal(expenses)).toBe(50);
    });
  });
});

关键原则：

• 每个测试仅针对一种行为
• 覆盖正常路径、边界情况和错误条件
• 使用描述性测试名称来解释场景
• 保持测试的独立性和隔离性

集成测试方法

测试组件如何协同工作，包括数据库、API 和服务交互：

describe('ExpenseAPI Integration', () => {
  beforeAll(async () => {
    await database.connect(TEST_DB_URL);
  });

  afterAll(async () => {
    await database.disconnect();
  });

  beforeEach(async () => {
    await database.clear();
    await seedTestData();
  });

  test('POST /expenses creates expense and updates total', async () => {
    const response = await request(app)
      .post('/api/expenses')
      .send({
        amount: 50,
        category: 'food',
        description: 'Lunch'
      })
      .expect(201);

    expect(response.body).toMatchObject({
      id: expect.any(Number),
      amount: 50,
      category: 'food'
    });

    // Verify database state
    const total = await getTotalExpenses();
    expect(total).toBe(50);
  });
});

端到端测试方法

使用 Playwright 或 Cypress 等工具测试完整的用户工作流程：

test('user can track expense from start to finish', async ({ page }) => {
  // Navigate to app
  await page.goto('/');

  // Add new expense
  await page.click('[data-testid="add-expense-btn"]');
  await page.fill('[data-testid="amount"]', '50.00');
  await page.selectOption('[data-testid="category"]', 'food');
  await page.fill('[data-testid="description"]', 'Lunch');
  await page.click('[data-testid="submit"]');

  // Verify expense appears in list
  await expect(page.locator('[data-testid="expense-item"]')).toContainText('Lunch');
  await expect(page.locator('[data-testid="total"]')).toContainText('$50.00');
});

2. 系统性缺陷分析

应用结构化的调试方法来识别和修复问题。

五步分析流程

1. 复现：可靠地复现缺陷

   • 记录触发问题的确切步骤
   • 识别所需的环境/状态
   • 记录预期行为与实际行为

2. 隔离：缩小问题范围

   • 对代码路径进行二分查找
   • 创建最小复现案例
   • 移除无关的依赖项

3. 根本原因分析：确定根本原因

   • 追踪执行流程
   • 检查假设和前提条件
   • 审查近期变更（git blame）

4. 修复实施：实施解决方案

   • 首先编写失败测试（测试驱动开发）
   • 实施修复
   • 验证测试通过

5. 验证：确保完整性

   • 运行完整测试套件
   • 测试边界情况
   • 验证无回归问题

常见错误模式

竞态条件：

// Test concurrent operations
test('handles concurrent updates correctly', async () => {
  const promises = Array.from({ length: 100 }, () =>
    incrementExpenseCount()
  );

  await Promise.all(promises);
  expect(getExpenseCount()).toBe(100);
});

空值/未定义错误：

// Test null safety
test.each([null, undefined, '', 0, false])
  ('handles invalid input: %p', (input) => {
    expect(() => processExpense(input)).toThrow('Invalid expense');
  });

差一错误：

// Test boundaries explicitly
describe('pagination', () => {
  test('handles empty list', () => {
    expect(paginate([], 1, 10)).toEqual([]);
  });

  test('handles single item', () => {
    expect(paginate([item], 1, 10)).toEqual([item]);
  });

  test('handles last page with partial items', () => {
    const items = Array.from({ length: 25 }, (_, i) => i);
    expect(paginate(items, 3, 10)).toHaveLength(5);
  });
});

3. 识别潜在问题

在问题演变为错误之前，主动识别它们。

安全漏洞

测试常见安全问题：

describe('security', () => {
  test('prevents SQL injection', async () => {
    const malicious = "'; DROP TABLE expenses; --";
    await expect(
      searchExpenses(malicious)
    ).resolves.not.toThrow();
  });

  test('sanitizes XSS in descriptions', () => {
    const xss = '<script>alert("xss")</script>';
    const expense = createExpense({ description: xss });
    expect(expense.description).not.toContain('<script>');
  });

  test('requires authentication for expense operations', async () => {
    await request(app)
      .post('/api/expenses')
      .send({ amount: 50 })
      .expect(401);
  });
});

性能问题

测试性能问题：

test('processes large expense list efficiently', () => {
  const largeList = Array.from({ length: 10000 }, (_, i) => ({
    amount: i,
    category: 'test'
  }));

  const start = performance.now();
  const total = calculateTotal(largeList);
  const duration = performance.now() - start;

  expect(duration).toBeLessThan(100); // Should complete in <100ms
  expect(total).toBe(49995000);
});

逻辑错误

使用参数化测试来捕获边界情况：

test.each([
  // [input, expected, description]
  [[10, 20, 30], 60, 'normal positive values'],
  [[0, 0, 0], 0, 'all zeros'],
  [[-10, 20, -5], 5, 'mixed positive and negative'],
  [[0.1, 0.2], 0.3, 'decimal precision'],
  [[Number.MAX_SAFE_INTEGER], Number.MAX_SAFE_INTEGER, 'large numbers'],
])('calculateTotal(%p) = %p (%s)', (amounts, expected, description) => {
  const expenses = amounts.map(amount => ({ amount, category: 'test' }));
  expect(calculateTotal(expenses)).toBeCloseTo(expected);
});

4. 测试覆盖率分析

使用自动化工具来识别测试覆盖的空白。

查找未测试的代码

运行提供的脚本来识别没有测试的源文件：

python3 scripts/find_untested_code.py src

该脚本将：

• 扫描源目录中的所有代码文件
• 识别哪些文件缺少对应的测试文件
• 按类型（组件、服务、工具等）对未测试文件进行分类
• 优先处理最需要测试的文件

优先级说明：

• API/服务：高优先级 - 测试业务逻辑和数据操作
• 模型：高优先级 - 测试数据验证和转换
• 钩子函数：中优先级 - 测试有状态行为
• 组件：中优先级 - 测试复杂UI逻辑
• 工具函数：低优先级 - 根据需要测试复杂功能

覆盖率报告分析

生成覆盖率报告后运行分析脚本：

# Generate coverage (using Jest example)
npm test -- --coverage

# Analyze coverage gaps
python3 scripts/analyze_coverage.py coverage/coverage-final.json

脚本将识别：

• 覆盖率低于阈值（默认80%）的文件
• 语句、分支和函数覆盖率百分比
• 需优先改进的文件

覆盖率目标：

• 关键路径：覆盖率 90% 以上
• 业务逻辑：覆盖率 85% 以上
• UI 组件：覆盖率 75% 以上
• 工具函数：覆盖率 70% 以上

5. 测试维护与质量

确保测试保持价值且易于维护。

测试代码质量原则

DRY（不要重复自己）：

// Extract common setup
function createTestExpense(overrides = {}) {
  return {
    amount: 50,
    category: 'food',
    description: 'Test expense',
    date: new Date('2024-01-01'),
    ...overrides
  };
}

test('filters by category', () => {
  const expenses = [
    createTestExpense({ category: 'food' }),
    createTestExpense({ category: 'transport' }),
  ];
  // ...
});

清晰的测试数据：

// Bad: Magic numbers
expect(calculateDiscount(100, 0.15)).toBe(85);

// Good: Named constants
const ORIGINAL_PRICE = 100;
const DISCOUNT_RATE = 0.15;
const EXPECTED_PRICE = 85;
expect(calculateDiscount(ORIGINAL_PRICE, DISCOUNT_RATE)).toBe(EXPECTED_PRICE);

避免测试相互依赖：

// Bad: Tests depend on execution order
let sharedState;
test('test 1', () => {
  sharedState = { value: 1 };
});
test('test 2', () => {
  expect(sharedState.value).toBe(1); // Depends on test 1
});

// Good: Independent tests
test('test 1', () => {
  const state = { value: 1 };
  expect(state.value).toBe(1);
});
test('test 2', () => {
  const state = { value: 1 };
  expect(state.value).toBe(1);
});

工作流程决策树

遵循此决策树来确定测试方法：

1. 是否添加新功能？

   • 是 → 先写测试（测试驱动开发）
     • 编写失败的测试
     • 实现功能
     • 验证测试通过
     • 重构
   • 否 → 转到步骤 2

2. 修复一个bug？

   • 是 → 应用bug分析流程
     • 复现bug
     • 编写失败的测试来演示bug
     • 修复实现
     • 验证测试通过
   • 否 → 转到步骤3

3. 提升测试覆盖率？

   • 是 → 使用覆盖率工具
     • 运行find_untested_code.py来识别空白
     • 运行analyze_coverage.py在覆盖率报告上
     • 优先处理关键路径
     • 为未测试的代码编写测试
   • 否 → 转到步骤4

4. 分析代码质量？

   • 是 → 系统化审查
     • 检查安全漏洞
     • 测试边界情况和错误处理
     • 验证性能特征
     • 审查错误处理

测试框架与工具

推荐技术栈

单元/集成测试：

• 测试运行器：Jest 或 Vitest
• React 组件测试：Testing Library
• API 测试：Supertest
• API 模拟：MSW (Mock Service Worker)

端到端测试：

• Playwright 或 Cypress
• 页面对象模型模式

覆盖率：

• Istanbul（内置于 Jest/Vitest）
• JSON 格式的覆盖率报告

运行测试

# Run all tests
npm test

# Run with coverage
npm test -- --coverage

# Run specific test file
npm test -- ExpenseCalculator.test.ts

# Run in watch mode
npm test -- --watch

# Run E2E tests
npm run test:e2e

参考文档

有关详细模式和技术，请参阅：

• references/testing_patterns.md- 全面的测试模式、最佳实践和代码示例
• references/bug_analysis.md- 深入的错误分析框架、常见错误模式和调试技术

这些参考资料包含大量示例和高级技巧。请在以下情况时查阅：

• 处理复杂测试场景时
• 需要特定模式实现时
• 调试异常问题时
• 寻求特定场景最佳实践时

脚本文件

analyze_coverage.py

分析Jest/Istanbul覆盖率报告以识别覆盖缺口：

python3 scripts/analyze_coverage.py [coverage-file]

若未指定路径，可自动查找常见覆盖率文件位置

输出内容：

• 低于覆盖率阈值的文件
• 语句、分支和函数覆盖率百分比
• 需要优先改进的文件

find_untested_code.py

查找无对应测试文件的源代码文件：

python3 scripts/find_untested_code.py [src-dir] [--pattern test|spec]

输出内容：

• 源代码文件与测试文件总数统计
• 测试文件覆盖率百分比
• 按类型分类的未测试文件（API、服务、组件等）
• 优先级排序建议

最佳实践总结

1. 先写测试（TDD）添加新功能时
2. 测试行为，而非实现- 测试应在重构后依然有效
3. 保持测试独立性- 测试间无共享状态
4. 使用描述性名称- 测试名称应说明场景
5. 覆盖边界情况- 空值、边界值、错误条件
6. 模拟外部依赖- 测试应快速可靠
7. 维持高覆盖率- 关键代码覆盖率80%以上
8. 立即修复失败的测试- 绝不提交损坏的测试
9. 重构测试- 采用与生产代码相同的质量标准
10. 善用工具- 自动化覆盖率分析与缺口识别