React 是一个非常受欢迎的前端框架，许多团队和开发者都选择使用它来构建他们的应用。在这个过程中，单元测试是一个非常重要的步骤，它可以确保代码在发布到生产环境之前是正确的，并且可以提高开发速度。
在这篇文章中，我们将会探讨在 React 中进行单元测试的几种方法，包括使用 Enzyme，react-test-renderer 和 Tape 库。我们将重点介绍 Enzyme，这是一个很流行的测试库，它可以帮助我们更容易地编写和运行测试用例。
安装 Enzyme
首先，我们需要安装 Enzyme。我们可以使用 npm 或者 yarn 来安装它：
# 使用 npm 安装 npm install --save-dev enzyme enzyme-adapter-react-16 # 使用 yarn 安装 yarn add --dev enzyme enzyme-adapter-react-16
其中 enzyme-adapter-react-16 是 Enzyme 用来适配 React 16.x 版本的库。
配置 Enzyme
接着，我们需要在项目中配置 Enzyme。我们需要在 src/setupTests.js 文件里编写配置代码：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });这段代码会告诉 Enzyme 使用 react-test-renderer 来渲染 React 组件，以便我们在测试中使用。
编写测试
我们编写测试用例的时候，需要关注三个方面：
- 测试什么
- 输入什么
- 预期什么输出
下面是一个简单的示例测试用例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ------ ---- -----------
------------------ -------- --- --------- ---
---------------- ----------- -- -- -
----------- ---- -- --- -------- -- -- -
----- ------- - --------------------- -------------
----- ---------- - ------------------------------
--------------------------------- -----
---
--------- --- ------- ------- ---- --------- -- -- -
----- ------- - ----------
----- ------- - --------------- ----------------------- -------------
-----------------------------------------
-----------------------------------
---
---这个测试用例的意思是测试按钮组件是否可以正确地渲染出文本，并且在点击按钮后是否可以正确地调用传入的 onClick 回调函数。
我们使用 shallow 方法来渲染组件。这个方法是 Enzyme 提供的，它可以按组件的结构层层递进地渲染出虚拟 DOM 树。我们可以使用 find 方法来查找特定的元素，然后使用 text 属性来获取元素的文本内容。另外，我们还可以使用 simulate 方法来模拟用户事件。
在这个示例中，我们还使用了 Jest 的 fn 函数来创建一个简单的 mock 函数。
使用 react-test-renderer
在上面的示例中，我们使用了 Enzyme 中的 shallow 方法来渲染组件。但是，如果我们想要更加直接地测试组件的渲染结果，我们可以使用 React 官方提供的 react-test-renderer 库。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------ ---- ----------------------
------ ------ ---- -----------
---------------- ----------- -- -- -
----------- ---- -- --- -------- -- -- -
----- ---- - --------------------------------- ----------------------
-------------------------------
---
---在这个例子中，我们用 TestRenderer.create 方法来创建一个测试用例。之后，我们可以使用 toJSON 方法来获取渲染结果的快照，并使用 Jest 的 toMatchSnapshot 方法来检查快照是否与预期相符。
使用 Tape
除了使用 Enzyme 和 react-test-renderer，还有一个很流行的测试库叫做 Tape。Tape 是一个小巧的库，它的 API 简洁且易于学习。
-- -------------------- ---- -------
------ ---- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
------------ ----------- --- -- -
--------------- ---- -- --- -------- -------- -- -
----- ------- - --------------------- -------------
----- ---------- - ------------------------------
------------------------ ------ -----
-------------
---
------------- --- ------- ------- ---- --------- -------- -- -
----- ------- - -- -- - -------------- --
----- ------- - --------------- ----------------------- -------------
-----------------------------------------
-------------
---
---这个示例中，我们使用 Tape 的 test 方法来组织测试用例，使用 equal 和 pass 方法来进行断言。这个示例测试了一个简单的按钮组件，但是 Tape 可以用来测试任何类型的 JavaScript 代码。
总结
在本文中，我们已经介绍了几种用于 React 单元测试的方法。我们介绍了 Enzyme 和 react-test-renderer 这两个流行的测试库，并展示了它们的使用方法和示例代码。另外，我们还介绍了 Tape 这个轻量级的测试库。希望这个文章对于 React 单元测试的初学者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64565cc3968c7c53b0986fe7