Skip to main content

测试

在 React 和 Next.js 中，你可以编写几种不同类型的测试，每种测试都有自己的目的和用例。此页面概述了可用于测试应用的类型和常用工具。

¥In React and Next.js, there are a few different types of tests you can write, each with its own purpose and use cases. This page provides an overview of types and commonly used tools you can use to test your application.

测试类型​

¥Types of tests

  • 单元测试涉及单独测试各个单元（或代码块）。在 React 中，单元可以是单个函数、钩子或组件。

    ¥Unit Testing involves testing individual units (or blocks of code) in isolation. In React, a unit can be a single function, hook, or component.

    • 组件测试是单元测试的更集中的版本，其中测试的主要主题是 React 组件。这可能涉及测试组件的渲染方式、它们与 props 的交互以及它们响应用户事件的行为。

      ¥Component Testing is a more focused version of unit testing where the primary subject of the tests is React components. This may involve testing how components are rendered, their interaction with props, and their behavior in response to user events.

    • 集成测试涉及测试多个单元如何协同工作。这可以是组件、钩子和函数的组合。

      ¥Integration Testing involves testing how multiple units work together. This can be a combination of components, hooks, and functions.

  • 端到端 (E2E) 测试涉及在模拟真实用户场景的环境（例如浏览器）中测试用户流。这意味着在类似生产的环境中测试特定任务（例如注册流程）。

    ¥End-to-End (E2E) Testing involves testing user flows in an environment that simulates real user scenarios, like the browser. This means testing specific tasks (e.g. signup flow) in a production-like environment.

  • 快照测试涉及捕获组件的渲染输出并将其保存到快照文件。运行测试时，会将组件的当前渲染输出与保存的快照进行比较。快照中的更改用于指示行为的意外更改。

    ¥Snapshot Testing involves capturing the rendered output of a component and saving it to a snapshot file. When tests run, the current rendered output of the component is compared against the saved snapshot. Changes in the snapshot are used to indicate unexpected changes in behavior.

异步服务器组件​

¥Async Server Components

由于 async 服务器组件对于 React 生态系统来说是新的，因此一些工具并不完全支持它们。同时，我们建议对 async 组件使用端到端测试而不是单元测试。

¥Since async Server Components are new to the React ecosystem, some tools do not fully support them. In the meantime, we recommend using End-to-End Testing over Unit Testing for async components.

指南​

¥Guides

请参阅以下指南，了解如何使用这些常用测试工具设置 Next.js：

¥See the guides below to learn how to set up Next.js with these commonly used testing tools: