Coursera 笔记

Module 02 · Understanding Function Components with Array and DOM Manipulation函数组件、数组与 DOM 操作

Testing React ComponentsReact 组件测试

Coursera ↗

欢迎来到 React 组件测试 课程！通过观看本视频，你将能够：

  • 解释什么是 测试 (Testing)
  • 列出测试的优点与缺点
  • 描述组件测试的不同方法
  • 介绍常用的测试工具

什么是测试？

测试是对代码逐行检查，验证代码的执行方式。测试可以使用一套测试来验证一个包含多段代码的应用，确保应用在没有错误的情况下成功执行。

测试的意义：

  • 防止意外回归：测试确保已有功能在未来的修改中没有被破坏。
  • 模块化构建：测试使开发者能更集中地进行当前任务，减少对过去错误的担忧。
  • 简化应用构建：复杂的应用可以通过模块化和测试来简化构建。
  • 减少手动验证需求：自动化测试减少了人工验证的成本。

测试的优缺点

优点：

  1. 防止回归：有效的测试避免了代码修改后导致的问题再次出现。
  2. 关注当前任务：开发者可以专注于当前开发任务，无需担心过去的错误。
  3. 模块化构建：促进应用的模块化，使得复杂的应用构建变得可能。
  4. 减少人工验证：减少了手动验证的需求，提升了开发效率。

缺点：

  1. 需要编写更多代码：测试需要额外编写测试代码，还需要调试和维护。
  2. 集成测试可能导致问题：非关键测试失败可能会导致应用在持续集成时被拒绝。

React 组件测试的目的

React 组件测试确保你的应用按照预期的方式为最终用户工作。测试验证开发者编写的代码是否没有错误，并通过模拟最终用户的操作来测试应用的功能。测试还能够确保应用更新后，整体功能不会受到影响。

回归测试 (Regression Testing)

  • 测试帮助我们防止回归，即已经修复的 bug 在未来再次出现，导致特性停止按预期工作。

React 组件测试的两种方法

  1. 单元测试 (Unit Testing)：
  • 在一个简单的测试环境中渲染组件树并断言其输出。通常使用浅渲染（shallow rendering）来隔离应用的某个部分。
  • 示例：渲染组件并检查其输出，确保使用默认属性时组件能正常渲染。
  1. 端到端测试 (End-to-End Testing)：
  • 需要在实际的浏览器环境中运行完整的应用程序。此方法涉及多步测试，结合多个单元测试，形成一个大的集成测试。
  • 示例：测试整个认证流程，模拟用户的操作。

组件测试的三大阶段

  1. 安排 (Arrange)：
  • 在这一阶段，准备组件的属性（props）。
  1. 执行 (Act)：
  • 渲染组件的 DOM 到用户界面，并注册用户可能触发的事件或操作。
  1. 断言 (Assert)：
  • 设定期望，并验证组件渲染的副作用（side effects）。

这种单元测试方式被称为 Arrange-Act-Assert 模式。

选择测试工具时的考虑因素

  • 速度与环境 (Speed vs. Environment)：一些工具提供快速反馈，但不完全模拟浏览器的行为；其他工具则使用真实的浏览器环境，但迭代速度较慢，可能在持续集成中不稳定。
  • 模拟内容 (What to Mock)：组件的“单元测试”与“集成测试”之间可能没有明显的界限。例如，测试一个表单时，是否也应该测试按钮？按钮组件应该有自己的测试套件吗？

常见的 React 组件测试库

Mocha、Chai 和 Sinon

这些工具属于 Node.js 背景下的 React 生态系统：

  • Mocha：测试运行器
  • Chai：断言库
  • Sinon：用于测试 JavaScript 逻辑的库，提供 间谍 (spies)、存根 (stubs) 和 模拟 (mocks) 功能
  • Enzyme：渲染React组件

Jest 和 React Testing Library

Jest：

  • 由 Facebook 发布，专门用于测试 React 组件。
  • 集成了 Mocha、Chai、Sinon 等功能，并提供 间谍、存根 和 模拟 功能。
  • 提供 快速迭代速度，包括 模块和定时器的模拟，便于对代码执行进行控制。
  • 提供 快照测试 (Snapshot Testing) 功能，帮助我们验证组件的渲染结果。

React Testing Library：

  • 是一组用于测试 React 组件的辅助工具，不依赖于组件的实现细节。
  • 推荐的方式是通过模拟用户行为来测试组件，而不是仅仅检查 DOM 结构。
  • 鼓励更好的测试实践，尤其是提高应用的可访问性。

Jest 和 React Testing Library 配合使用：

  • 可以通过 jsdom 访问 DOM，模拟真实的浏览器行为进行测试。
  • 通过 render 方法渲染组件，并使用 screen 对象访问渲染后的 HTML。

Enzyme (替代工具)：

  • 之前常用的测试库，可以渲染 React 组件，但现被 React Testing Library 取代。

React Testing Library 的优势

  • 与用户行为一致：React Testing Library 鼓励你像最终用户一样进行测试，而不是关注实现细节。测试结果更具信心和可靠性。
  • 提高生产力：通过测试组件的输出而非实现细节，你能更高效地编写和维护测试。

测试示例

import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

// 渲染组件并获取元素
test('displays the correct message', () => {
  render(<MyComponent />);
  const linkElement = screen.getByText(/hello world/i);
  expect(linkElement).toBeInTheDocument();
});
  • 上面的测试通过 React Testing Library 渲染了组件，并使用 screen.getByText 查找文本内容，从而验证组件是否按预期渲染。

React Testing Library 强调测试组件的 输出，就像终端用户使用应用程序一样，而非关心其实现细节。

总结

在本视频中，你学到了：

  • 测试是对代码逐行检查，确保其按预期执行。
  • 组件测试分为两种方法：简单测试环境渲染组件或模拟真实浏览器环境进行端到端测试。
  • 组件测试包含三个阶段：安排、执行和断言。
  • React 组件可以通过 Mocha、Chai、Sinon、Jest 和 React Testing Library 进行测试。
  • React Testing Library 提供了一个基于用户行为的测试方式，使你更有信心测试组件。

通过编写高质量的测试，你可以确保 React 组件按预期工作，并提高长期开发效率。🚀