React 是当今最受欢迎的前端框架之一。但是，即使是最好的开发人员也会在代码中出现 bug。这就是测试的重要性。 Enzyme 是一个可用于 React 应用程序的 JavaScript 测试实用程序库。然而，由于 React 17.x 中的许多更改，Enzyme 开始出现一些兼容性问题。本文将为您提供 Enzyme 测试指南，以确保您的 React 应用程序在React 17.x 中与 Enzyme 一起平稳运行。
什么是 Enzyme？
Enzyme 是一个 JavaScript 实用程序库，可用于测试 React 应用程序。它使开发人员可以以易于使用且直观的方式测试他们的React 应用程序。Enzyme 将类似于 jQuery 的 API 引入 React 测试，有助于开发人员构建高质量的 React 组件。
React 17.x 中的更改
在 React 17.x 中，React Team 发布了一种新的生命周期方法 – UNSAFE_componentWillReceiveProps 已经不再适用，代之以其他生命周期方法。此外，已经移除了如 React.createFactory、React.createClass、React.PropTypes 等 API。这些更改会影响测试 React 组件的方式，因此，我们需要对 Enzyme 库的使用进行一些改进。
安装 Enzyme 适配器
Enzyme 需要适配器才能与 React 一起使用。在 React 17.x 中使用 Enzyme，我们需要安装 @wojtekmaj/enzyme-adapter-react-17 适配器。我们可以使用以下命令进行安装。
--- ------- ---------------------------------- ----------
接下来，我们需要将适配器与 Enzyme 环境一起配置。将以下代码添加到 test setup 文件中。
------ - --------- - ---- --------- ------ ------- ---- ------------------------------------- ----------- -------- --- --------- ---
升级 Enzyme API
在 Enzyme 中，ReactWrapper 和 ShallowWrapper 创建方式的参数不再接受未来的 React.Component，所以我们需要做出一些更改。我们需要使用 ReactComponent 替换 React.Component。同样，我们需要使用 configure 的 adapter.createRenderer（）方法替换 ReactTestHelper 类。
------ ------- - -------------- - ---- ---------
----- --------------- -
------------- -
------------ - -------------
-------------- - ------------------------
-
------------ -
------ -------------
-
-------------- -
------ ---------------
-
------- -
------ ---------------------------- ----
-
------------ -
------ ------------------- - ------------------------ ---- ---
-
--------- -
-----------------------
-
-
------ ------- ----------------改变 shallow 和 mount 函数的参数
改变 Enzyme API 后，我们需要更改在 shallow 和 mount 函数中传递的参数。 对于测试类组件的 shallow，需要在一个包含 JSX 的对象中将 props 和 children 传递。 对于封装组件中的 mount，我们需要将 props 和 children 传递给单个组件：
-- ----- ------- -----
------ ----- ---- --------
------ - ------ ------- - ---- ---------
------ - --- - ---- --------
-------------- ---- -- -- -
-- -- ----
-------- --- -- -- -
----- ------- - ------------ ----
--------------------------------------------
---
-------- ----- -- -- -
----- ------- - ------------ --------- ----
--------------------------------------------
---
-------- ---- -- -- -
----- ------- - ------------ ------------ ------- ----
--------------------------------------------
---
-------- ---- -- -- -
----- ------- - ------------ ------ ---- ----- -- ----
------------------------------------------------
---
----- ------ ------- -----
------ ----- ---- --------
------ - ------ ------- - ---- ---------
------ --- ---- --------
-------------- ---- -- -- -
-------- ---- -- -- -
----- ------- - ---------- ------ ---- ----- -- ----
--------------------------------------------------------
---
---了解新的生命周期方法
在 React 17.x 中，我们需要使用一些新的生命周期方法。我们应该始终选择使用更稳定的生命周期方法来代替已经被弃用的生命周期方法。
例如，我们可以使用新的 getSnapshotBeforeUpdate 生命周期方法来取代被弃用的 UNSAFE_componentWillReceiveProps 生命周期方法。
-------- ---------------------------------- ---------- -
-- ------------------ -
------ -----
-
----- ---- - ------------------
------ ------------------
-结论
Enzyme 是一个非常有用的测试实用程序库，可以帮助我们构建高质量的 React 应用程序。随着 React 17.x 的发布，我们需要对其进行升级并采用新的 API。通过上述的指南可以更好地处理 React 17.x 中的兼容问题，使我们能够构建更强壮和优质的 React 应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6710da0fad1e889fe2fc6552