React 设计模式 0x8：测试

2023-05-17 21:08:46 浏览数 (1)

学习如何轻松构建可伸缩的 React 应用程序：测试

# 如何测试组件

测试在每个 Web 应用程序中都非常重要，即使在 React 中也是如此，特别是在其组件方面。

有两种方法可以实现这一点，包括以下内容：

  • 功能测试
  • 渲染测试

# 功能测试

功能测试是一种测试，用于验证函数按预期工作，这个测试通常根据被测试的函数的预期结果进行断言。

# 渲染测试

渲染测试是一种测试，用于验证您的组件是否正确渲染。

# 使用 Jest 进行功能测试

Jest 是测试 React 应用程序时非常流行的测试库。 Jest 通常用于运行功能测试，但我们也可以用它进行渲染测试。

初始化测试项目：

代码语言：javascript复制
npx create-react-app testing-with-jest

cd testing-with-jest

npm install --save-dev jest

测试文件一般以 .test.js 或 .spec.js 结尾。在 src 目录下创建一个名为 sum.test.js 的文件，然后将以下内容添加到该文件中：

代码语言：javascript复制
function sum(a, b) {
  return a   b;
}

test("adds 1   2 to equal 3", () => {
  expect(sum(1, 2)).toBe(3);
});

运行测试：

代码语言：javascript复制
npm test

# React Testing Library

React Testing Library 基于 DOM Testing Library 添加了用于处理 React 组件的 API。该库实际上通过 data-tested 查找节点中的元素以进行测试。还可以使用此库来模拟 API 并验证它们的真实性。

更多信息，请访问 https://testing-library.com/docs/react-testing-library/intro (opens new window)。

# 如何进行回归测试

回归测试是确保在进行更改之前测试过的所有内容仍然完好无损的测试方法。当应用程序中发生更改时，应用程序中的某些内容很可能会出现故障。回归测试的目的在于确保一切仍然像以前一样正常工作。

可以使用 Jest 中的快照测试来实现这种回归测试。

安装依赖：

代码语言：javascript复制
npm install --save-dev react-test-renderer

通过简单小例子来演示：

代码语言：javascript复制
import renderer from "react-test-renderer";

it("renders correctly", () => {
  const tree = renderer.create(<label htmlFor="search">Search:</label>).toJSON();
  expect(tree).toMatchSnapshot();
});

当应用程序中发生更改时，快照测试将捕获更改并将其与先前的快照进行比较。如果快照不匹配，则测试将失败。

# 使用 Cypress 进行端到端（e2e）测试

当涉及端到端测试时，Cypress 在其他框架/库中处于领先地位。

要使用 Cypress，请在 React 应用程序中运行以下命令：

代码语言：javascript复制
npm install --save-dev cypress
npx cypress open

完成后，请将以下代码添加到 package.json 文件中的 scripts 部分下：

代码语言：javascript复制
{
  "e2e-test": "cypress open."
}

然后在终端中运行 npm run e2e-test 并等待。

这将打开一个新窗口，显示您可以使用的一些预配置测试。

要了解有关 Cypress 的更多信息，可以访问 React Quickstart (opens new window)。

# 使用 Jest 进行集成测试

在大多数 React 应用程序中，通常需要与外部 API 集成以在应用程序中发布和获取数据。

可以使用 Jest 来测试 API 行为，以查看预期和意外结果。

代码语言：javascript复制
// test userlist
test("userlist", async () => {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  const users = await response.json();
  expect(users.length).toBeGreaterThan(0);
});

# 使用 Jest 模拟函数

使用 模拟函数 来侦测(查看)我们的函数被调用的情况，或者使用它来测试单个函数或整个模块。

在 Jest 中有以下三种类型的模拟函数：

  • Jest.fn(用于模拟单个函数)
  • Jest.mock(用于模拟整个模块)
  • Jest.spyOn(用于查看函数的调用情况)

更多信息请访问 https://jestjs.io/docs/en/mock-functions (opens new window)。

# React 测试最佳实践

  • 对每个组件编写测试
    • 为每个组件编写测试，以确保它们能够正确地渲染和响应
  • 使用测试库
    • 使用 Jest 和 React Testing Library 等测试库，它们提供了专门用于测试 React 组件的工具和函数
  • 编写测试用例
    • 编写完整的测试用例，覆盖组件的所有代码路径，包括正常情况和异常情况
  • 使用快照测试
    • 使用 Jest 中的快照测试功能来验证组件是否按预期呈现
  • 使用模拟数据
    • 使用模拟数据来测试组件，以确保它们在不同的数据情况下都能正常工作
  • 使用模拟函数
    • 使用模拟函数来模拟组件的依赖项和外部接口，以便更好地控制测试环境
  • 集成测试
    • 编写集成测试来测试应用程序的整个流程，确保各个组件之间的交互和数据传递是正确的
  • 使用 CI/CD
    • 将测试集成到 CI/CD 管道中，以便在每个提交时自动运行测试并及时发现问题
  • 运行覆盖率测试
    • 运行覆盖率测试以检查测试代码是否覆盖了应用程序的所有部分，以便更好地了解测试的质量和覆盖范围
react 渲染 测试 函数 设计模式

0 人点赞