React 设计模式 0x8：测试

Cellinlab

发布于 2023-05-17 21:08:46

1.8K0

发布于 2023-05-17 21:08:46

文章被收录于专栏：Cellinlab's Blog

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

# 如何测试组件

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

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

功能测试
渲染测试

# 功能测试

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

# 渲染测试

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

# 使用 Jest 进行功能测试

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

初始化测试项目：

npx create-react-app testing-with-jest

cd testing-with-jest

npm install --save-dev jest

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

function sum(a, b) {
  return a + b;
}

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

运行测试：

npm test

# React Testing Library

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

# 如何进行回归测试

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

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

安装依赖：

npm install --save-dev react-test-renderer

通过简单小例子来演示：

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 应用程序中运行以下命令：

npm install --save-dev cypress
npx cypress open

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

{
  "e2e-test": "cypress open."
}

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

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

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

# 使用 Jest 进行集成测试

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

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

// test userlist
test("userlist", async () => {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  const users = await response.json();
  expect(users.length).toBeGreaterThan(0);
});