React 是一种非常流行的 JavaScript 库，以其出色的组件化和数据管理方式而闻名。对于开发人员来说，对 React 组件进行测试是至关重要的，因为它可以确保页面的正确性和稳定性。在 React 中使用 Enzyme 进行单元测试是一个流行的方式，它支持快速地创建和渲染组件，并提供了强大的 API，可以用于查找、交互和断言组件的行为。在这篇文章中，我们将分享一些关于如何利用 Enzyme 进行 React 组件测试的实践经验。
安装和配置 Enzyme
Enzyme 可以安装到任何 React 应用程序中，它为我们提供了大量的帮助和工具。在开始使用 Enzyme 之前，我们需要先安装它。我们可以使用 npm 或 yarn 来完成这一操作：
npm install --save-dev enzyme enzyme-adapter-react-16
或者
yarn add --dev enzyme enzyme-adapter-react-16
接下来，我们需要在我们的测试代码中配置 Enzyme，以便使用它的 API。为了配置 Enzyme，我们需要在测试项目中创建一个 .setupTests.js 文件，并添加以下内容：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });这样就完成了 Enzyme 的安装和配置。
如何使用 Enzyme 进行测试
Enzyme 提供了 3 个测试组件的 API：shallow()、mount() 和 render()。这些 API 都可以用于创建和渲染 React 组件，但它们之间有所不同，根据我们要测试的组件和测试的目的，我们将会使用不同的 API。
使用 shallow() 进行测试
shallow() 方法用于渲染组件并返回一个“浅渲染器(wrapper)”，它只渲染当前组件，而不会渲染其嵌套的子组件。这是一种轻量级的测试方式，适用于测试组件的渲染方法、生命周期方法和回调函数等。下面是一个示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --- ---- --------
------------- ----------- -- -- -
---------- ------ ----------- -- -- -
----- ---------- - ------------ ----
-------------------------------------
---
---在上面的代码中，shallow() 方法用于创建一个 <App /> 组件的浅渲染器(wrapper)，我们可以使用它来断言 <App /> 组件是否可以正确地渲染。这个示例使用了 Jest 的快照机制，如果测试通过，将会生成一个屏幕捕获快照并保存到一个 .snap 文件中，在后续的测试中，我们可以使用这个快照来断言组件是否发生了变化，这是一种非常方便的测试方式。
使用 mount() 进行测试
mount() 方法用于将组件放置在一个真实的 DOM 中，并提供了一种更好的方式来测试容器组件(container components)、组件之间的交互和事件处理器等。这种方式会影响性能，因为它会渲染嵌套的子组件，并将它们挂载到真实的 DOM 树上。下面是一个示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ --- ---- --------
------------- ----------- -- -- -
---------- ---- ------------- ---- ------ -- --------- -- -- -
----- ------------- - ----------
----- ---------- - ---------- ----------------------------- ----
----- ------ - --------------------------
-------------------------
-----------------------------------------
---
---在上面的代码中，我们使用 mount() 方法将 <App /> 组件挂载到真实的 DOM 上，然后通过 find() 方法查找 DOM 中的元素，并使用 simulate() 方法模拟用户的操作。这个示例演示了如何模拟点击事件并测试事件处理器函数是否发生了调用。
使用 render() 进行测试
render() 方法用于将组件渲染成静态 HTML，并返回一个普通的对象。这种方式比较有限，适用于测试组件的静态 HTML 结构是否正确。下面是一个示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ---------
------ --- ---- --------
------------- ----------- -- -- -
---------- ------ ----------- -- -- -
----- --------- - ----------- ----
------------------------------------
---
---在上面的代码中，我们使用 render() 方法将 <App /> 组件渲染成一个 HTML 字符串，并将其与浏览器中的 HTML 进行比较。这个示例使用了 Jest 的快照机制，如果测试通过，将会生成一个屏幕捕获快照并保存到一个 .snap 文件中，在后续的测试中，我们可以使用这个快照来断言组件是否发生了变化。
如何使用 Enzyme 断言组件的行为
Enzyme 提供了一组强大的断言(assert) API，可以测试组件的行为和属性。这些 API 主要包括以下几个方法：
exists()：断言当前选择器是否存在hasClass(className)：断言组件是否包含指定的 CSS 类名prop(key, value)：断言组件是否具有指定的属性(key)和属性值(value)contains(nodeOrNodes)：断言组件是否包含指定的节点(node)或节点数组(nodes)text()：获取当前选择器的文本内容
下面是一个示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
---------------- ----------- -- -- -
---------- ------ ----------- -- -- -
----- ------------- - --------------------- --------------
------------------------------------------
----------------------------------------------------
---------------------------------------------------
----------------------------------------- ------------------------
---------------------------------------- ------
---
---在上面的代码中，我们使用了 shallow() 方法将 <Button /> 组件渲染成浅渲染器(wrapper)，并对该组件进行了多个断言。这个示例演示了如何使用 Enzyme 来测试组件的属性、节点和文本内容。
结论
在 React 应用程序中进行单元测试是非常重要和有益的，可以帮助我们确保应用程序的正确性和稳定性。在本文中，我们介绍了如何使用 Enzyme 进行 React 组件测试，Enzyme 提供了强大的 API，可以用于快速创建、渲染和测试组件。我们还了解了如何使用三种不同的 Enzyme API：shallow()、mount() 和 render()，以及如何使用断言 API 断言组件的行为和属性。希望本文能够帮助您更好地测试 React 应用程序，并提高应用程序的质量和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67456373c1a23897ea93d103