React 是一个非常流行的前端框架，许多公司将其作为主要的前端开发技术。然而，在编写 React 组件时，如何编写和运行测试代码是一个值得探讨的话题。在这篇文章中，我们将会学习如何使用 Jest 和 React Testing Library 进行更好的 React 测试。
Jest 和 React Testing Library 简介
Jest是Facebook开源的测试框架，主要用于JavaScript代码的测试，它具有简洁的语法，运行速度快，易于集成。
React Testing Library是一个用户行为驱动的测试工具库。它可以帮助我们编写易于维护的测试代码，以及更好的组织我们的测试套件。
安装 Jest 和 React Testing Library
首先，我们需要安装 Jest 和 React Testing Library。我们可以使用 npm 来进行安装。下面是命令：
npm i jest @testing-library/react -D
编写测试代码
在编写测试代码前，首先需要编写一个组件。在本文中，我们将以一个简单的按钮组件为例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------- ------------- -
----- ------ -------- - ------
------ -
------- ------------- ------------------
------
---------
--
-接下来，我们需要测试这个组件。下面是我们的测试代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- --------- - ---- ------------------------- ------ ------ ---- ----------- ------------- ------ ----------- -- -- - ----- ------- - ---------- ----- - --------- - - -------------- ----------- --- ----------------- ---- ----- ------ - ---------------- ----- ----------------------------------- --- ----------- ------- ------- ---- ------ -- --------- -- -- - ----- ------- - ---------- ----- - --------- - - -------------- ----------- --- ----------------- ---- ----- ------ - ---------------- ----- ------------------------ ----------------------------------------- ---
在第一个测试用例中，我们测试组件能否正常渲染。我们使用 render 函数将组件渲染到虚拟 DOM 上，并在测试代码中通过 getByText 方法获取到测试元素，确保按钮正常渲染。在第二个测试用例中，我们测试点击按钮后是否能正确地执行 onClick 事件处理程序。
Jest 和 React Testing Library 最佳实践
在测试代码中，有一些最佳实践可以帮助我们编写更好的测试代码。下面是一些最佳实践：
不要与实现细节耦合
当编写测试代码时，我们不应该与组件的实现细节紧密耦合。我们应该从用户的角度来编写测试用例，并测试组件的行为而不是实现细节。例如，在上面的例子中，我们只是测试了组件在按钮被单击时是否执行 onClick 处理程序，而不是 onClick 处理程序是如何被实现的。
将测试代码分离到单独的测试文件中
为了保持测试代码的可维护性，我们应该将测试代码和源代码分离到不同的文件中。这样可以使我们更方便地管理测试代码和源代码，同时也可以确保测试代码与源代码的分离性。
小心使用模拟
在编写测试代码时，我们需要小心使用模拟。如果我们对源代码进行过多的模拟，我们最终可以测试的只是代码行为的一部分，而不是完整的代码行为。因此，我们应该尽可能保持测试代码的简洁性，只在必要的时候进行模拟。
在测试中使用多个断言
从一个测试中返回多个值是合法的，而且在某些情况下也是有用的。例如，在我们的例子中，在测试点击按钮后是否正确地执行 onClick 处理程序时，我们使用了两个断言：expect(onClick).toHaveBeenCalledTimes(1) 和 expect(onClick).toHaveBeenCalledWith()。这样可以确保测试更加全面。
结论
本文介绍了如何使用 Jest 和 React Testing Library 进行 React 测试。我们演示了一个简单的按钮组件，并展示了如何编写测试代码以确保组件的正常行为。同时，我们还介绍了一些编写测试代码的最佳实践。如果你正在编写 React 组件，这些技巧有助于帮助你编写更好的测试代码，并保证组件质量的同时提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67455dd8c1a23897ea92a28e