作者 | sanjeev sharma
翻译者 |徐学文.
策展 |丁晓云.
你打算为你的 React 编写测试吗？因为找不到一个好的教程来入门而感到沮丧？好吧，这篇文章正是您所需要的。 在本文中，我们将介绍编写单元测试的所有步骤，以及在此过程中可能遇到的错误和问题。
本文使用 JEST 和 React 测试库库。 如果你想使用其他库也没关系，本文中的一些基础知识也会有所帮助。
本文中介绍的所有**都托管在 GitHub 上，本文末尾提供了链接。
当然，产品开发可以在不编写测试的情况下完成。 用户、产品经理，甚至测试人员或 QA 都不在乎产品是否经过测试**。 但是，作为开发人员，您应该关心！
假设您有一个拥有数万用户的用户，当您对公共实用程序函数进行一些重构（或添加功能修复）时，并在调用该函数的应用中的某个位置对其进行测试时，它表明该函数有效。 所以你选择在星期五上线（这是一个低级错误）。 然后，该功能无法在应用程序的其他位置工作，导致周末在线中断。 在这一点上，你多么希望在这些地方有测试，可以在发布到生产环境之前自动运行，从而避免这种失败。
上述情况比您想象的更常见。 你可能还没有遇到过它（虽然这只是时间问题），但包括我在内的很多工程师都已经遇到过它。
因此，测试很重要，原因如下：
增强您对发布的信心。
测试本身就是一个文档。
可用于调试和重构。
从长远来看，它有助于缩短开发时间。
对于所有希望晋升的初级开发人员来说，具备编写测试的能力非常重要。
我们将教您如何从头开始编写测试**，因此请准备好您的终端。 首先，让我们使用 Vite 创建一个示例项目。
创建项目后，使用以下命令运行它。
程序运行后，您将在页面上看到一个演示应用程序。
我们不会向应用程序添加新功能，但为了编写按钮测试，我们需要将按钮重构为单独的组件。
接下来，让我们向页面添加两个按钮：
按钮的功能是在单击时将 count 的值乘以 2。 另一个按钮在单击时执行以下操作：如果 count 的值以 0 结尾，则将其值除以 2。 如果 count 的值是斐波那契数，则将其值相加 1。 否则，将 count 的值平方。 
我们需要在 utils 模块中声明上面使用的两个函数。 同时，我们也声明了一些辅助函数，但由于它们在其他地方没有使用，所以我们不需要在这里导出它们。
*准备好了，现在是时候开始编写测试了**。 在这里，我们跳过 React，先为实用程序函数编写测试。 这有助于我们理解 Jest 框架的一般用法。
接下来，让我们为 doublethenum 函数编写一个测试。
上面的 ** 用于测试我们的函数是否按预期执行。 任何测试**都将包括以下关键组件：
describe 函数：第一个参数是一个字符串，将在测试运行时显示。 第二个参数是测试实际执行的函数。 describe 函数的主要目的是对相同类型的测试进行分组。 这里只有一个测试，在另一个示例中，你会看到有多个测试。 it函数：其参数结构类似于 describe 函数的参数结构。 但是，此处的字符串参数应尽可能详细地描述测试函数。 当然，您也可以使用测试功能来代替它。 Expect 语句块：此函数中的前三行很简单。 最后一行是断言，用于确定 doublethenum 函数是否正常工作。 此外，我们在这里使用 toequal matcher 函数。 Jest 提供了很多匹配器，例如：
tobenull 用于匹配 null。
TobeTruthy 用于匹配判定为 true 的语句。 有关媒人的更多信息，请参阅以下链接：
为了运行测试，我们需要安装 jest：
然后在包装中json格式：
最后，通过执行 yarn test 命令来运行测试。
对于大多数人来说，上述步骤就足够了。 但是，如果您在模块导入或 TypeScript 方面遇到任何问题，请按照以下步骤操作：
安装并设置 @babel preset-env：
然后，将其配置到包中乔斯：
安装 TypeScript 依赖：
然后，开玩笑config.TS
然后执行测试，结果如下：
从输出中，您可以看到我们在 describe 中声明的字符串信息及其函数。
恭喜，你已经完成了你的第一个测试！
喜欢这篇文章吗？如果你觉得它很好，我建议你看看我最受欢迎的另一篇文章，The Complete Guide to Redux，它已经被 2 人阅读了50,000：接下来，让我们为 funkynum 函数编写测试。
在编写测试时，您应该尽可能多地涵盖函数的分支和语句。 测试覆盖率越高，一个人的信心就越大。
如果再次运行测试，应看到以下输出。
理想情况下，我们还应该为 isfibonacci 和 isperfectsquare 函数编写单独的 describe 语句块。 在单元测试中，测试应彼此独立。 为了简洁起见，我们在这里不这样做。
技巧。 通过打电话。 跳过或测试skip 跳过任何测试，或调用 describeskip 跳过整个测试块。
通过调用它仅或测试仅执行单个测试。
我们已经介绍了如何使用 Jest 进行 JS 测试。 现在，让我们深入了解 React 上的测试。
在开始之前，我们还需要安装一些依赖库：
同时，你还需要在开玩笑中设置一个游戏config.TS：
让我们为 counterbutton 组件编写一个基本测试：
在上面的部分中，我们提供了所需的 props 并尝试渲染组件。 对于任何组件，这应该是您为其编写的第一个测试。 因为如果该测试失败，那么其他测试将毫无用处。
RTL（React Testing Library）的渲染函数将在文档中设置身体。
它还返回一些查询方法，例如 GetByText，可用于查找 DOM 中的元素。
点击这里进行所有查询。
如果再次运行测试，您应该会看到 2 组测试 - 全部为绿色且通过。
我们编写的第二个测试是测试组件对 props 的响应。 如果 props 没有相互依赖关系，则应为每个 prop 参数编写单独的测试。
getbytext 函数是一种查询方法，它允许我们通过字符串获取元素。
tobeinthedocument 函数是一个类似于 toequal 的匹配器。 jest 默认不提供此功能，需要先安装 @testing-library jest-dom 库才能使用。
不同的环境有不同的包，比如在 React Native 中，需要使用 @testing-library jest-native。
如果再次运行测试，则测试也应通过。
最后，让我们写这篇文章的最后一个也是最重要的测试。 我们将编写一个测试来检查单击事件处理程序是否按预期工作。
为了生成用户事件（例如点击和击键），我们需要安装另一个包。
与之前的测试**相比，此测试**几乎相同，只有一些细微的差异。
注意：由于它模拟用户事件，因此此函数是异步执行的。
在第一行开玩笑fn（） 是一个模拟函数。 它允许您在测试运行时跟踪许多有用的信息，例如调用参数、调用次数等。 像这样的函数，你稍后会看到很多。
我们还使用了新的查询方法 getbyrole 来查找按钮元素。
在检查是否调用了 mock 函数之前，我们需要等待 click 事件完成。
就是这样！如果运行测试，它们也应该通过。
获取全部 **：：
如果按照本文成功完成了测试的编写，则可以开始将测试添加到库中，并进一步探索各种测试功能。
此外，我建议您了解有关以下内容的更多信息：
getbytestid - 这是一种非常常见的查询方法。 当其他方法失败时，可以使用它。 了解设置和拆卸方法。 它将提升您的测试。 了解如何模拟 npm 模块、API 调用、全局状态和上下文等。 原文链接：React Unit Testing Examples： A Quick Start Guide Architecture Frameworks InfoQ 专题文章。