javascript-testing-patterns

JavaScript Testing Patterns - JavaScript 与 TypeScript 测试完整指南

技能概述

全面掌握 JavaScript/TypeScript 应用的测试策略，使用 Jest、Vitest 和 Testing Library 实现单元测试、集成测试和端到端测试，包含 Mock、Fixture 和 TDD 实战方法。

适用场景

1. 新项目测试基础设施搭建

当你开始一个新的 JavaScript 或 TypeScript 项目时，需要从零配置完整的测试环境。本技能帮助你选择合适的测试框架（Jest 或 Vitest），配置测试运行器，设置测试覆盖率报告，并建立可扩展的测试目录结构。

2. 编写各层次的自动化测试

无论是验证单个函数的单元测试，还是确认 API 协作的集成测试，或是模拟用户完整操作流程的端到端测试，本技能提供针对每种测试类型的具体实现模式和最佳实践。

3. 测试驱动开发（TDD）实践

采用 TDD 工作流时，本技能指导你如何先编写测试用例，再实现功能代码，通过红-绿-重构循环提升代码质量和可维护性，同时减少后期调试成本。

核心功能

1. 多框架测试方案

支持主流 JavaScript 测试框架包括 Jest（最流行的选择）、Vitest（基于 Vite 的快速测试框架）和 Testing Library（以用户视角测试组件），提供针对不同技术栈的配置指南和代码示例。

2. Mock 与测试替身策略

详细讲解如何使用 Mock、Stub 和 Fixture 隔离外部依赖，包括 API Mock、函数 Mock、模块 Mock 等技术，确保测试的独立性和可重复性，同时避免过度 Mock 导致的脆弱测试。

3. 前端组件测试模式

针对 React、Vue 等现代前端框架，提供组件级测试的具体方案，使用 Testing Library 的查询和断言方法，验证组件渲染、用户交互、状态变更等行为，而非测试实现细节。

常见问题

JavaScript 项目应该选择 Jest 还是 Vitest？

Jest 是最成熟的测试框架，零配置开箱即用，生态丰富，适合大多数项目。Vitest 基于 Vite 构建，启动速度更快，特别适合使用 Vite 的项目。如果你的项目已经在使用 Vite，推荐优先选择 Vitest 以获得更快的开发体验。

Mock 和 Stub 有什么区别？

Mock 用于验证行为（如函数是否被调用、调用次数、调用参数），常用于测试对象之间的交互。Stub 用于提供预设的返回值，主要用于隔离依赖。在实际使用中，Jest 的 jest.fn() 可以同时充当 Mock 和 Stub 的角色。

TDD 适合所有项目吗？

TDD 特别适合业务逻辑复杂、需求变化频繁的项目，可以提前发现设计问题并建立回归测试保护网。但对于探索性原型开发、简单脚本或 UI 高度不确定的项目，传统开发后再补充测试可能更高效。建议从关键业务逻辑开始尝试 TDD，逐步扩展。

Testing Library 和传统测试方式有什么不同？

Testing Library 强调测试用户看到的行为而非实现细节，它提供类似用户操作的查询方法（如 getByText、getByRole），避免测试组件的内部状态和方法。这种方式使测试更稳定，不易因重构而失败，是现代前端测试的推荐实践。

如何在 CI/CD 中集成测试？

主流 CI/CD 平台都支持测试集成。通常在流水线中配置测试命令（如 npm test），设置测试覆盖率阈值，失败时阻止部署。GitHub Actions 可使用 npm install -> npm test -> npm run build 的流程，配合覆盖率报告工具如 Codecov 或 Coveralls 展示测试趋势。

测试覆盖率 100% 有必要吗？

追求 100% 覆盖率往往投入产出比不高。通常建议核心业务逻辑达到 80-90% 覆盖率，边缘代码和简单工具函数适当降低。更重要的是测试的质量而非数量，良好的测试应该覆盖正常路径、边界条件和异常情况。盲目追求覆盖率可能导致为了覆盖而编写无意义的测试。