React 是一个非常流行的前端开发框架，但如何有效地测试 React 代码呢？这就需要使用 Enzyme 这个工具了。Enzyme 是一个 React 组件测试库，由 Airbnb 开发并维护。本文将介绍 Enzyme 的使用方法和一些技巧。
Enzyme 的三个工具
在使用之前，需要先安装 Enzyme 及其依赖：
npm install --save-dev enzyme enzyme-adapter-react-16 react-test-renderer
enzyme：Enzyme 核心库。enzyme-adapter-react-16：将 Enzyme 与 React 16 集成。react-test-renderer：React 测试渲染库。
接下来，我们来了解一下 Enzyme 提供的三个工具。
Shallow rendering
Shallow rendering 是一种测试组件的方法，将组件渲染为浅层次的树。它只会渲染当前节点，不会渲染子组件。这种测试方法非常快，适合用于测试单个组件的行为、事件处理函数等。
下面是一个使用 Shallow rendering 测试一个简单组件的例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
---------------- ----------- -- -- -
--- -------
------------- -- -
------ - --------------- ----
---
---------- ------ - -------- -- -- -
----------------------------------------------
---
---------- ------ ------- ---- ------ -- ------- -- -- -
----------------- ----- ------ --- ---
------------------------------------------------ -----
---
---------- ------ ------- ------- -- -- -
----- ----------- - ----------
----------------- -------- ----------- ---
----------------------------------------
---------------------------------------
---
--Full rendering
Full rendering 是一种测试组件的方法，将组件渲染为深层次的树，并将子组件也全部渲染出来。这使得我们可以加载实际的 DOM，测试组件的交互和行为。
下面是一个使用 Full rendering 测试一个接收 props 的组件的例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ---- ---- ---------
-------------- ----------- -- -- -
---------- ------ ---- ------- -- -- -
----- ----- - --------- --------- ----------
----- ---- - ----------- ------------- ----
---------------------------------------------------
---
--Static rendering
Static rendering 是一种将 React 组件渲染为静态 HTML 的方法。这种方法只在测试性能或者需要将静态 HTML 作为字符串返回时使用。
下面是一个使用 Static rendering 渲染组件的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ---------
------ ------ ---- -----------
---------------- ----------- -- -- -
---------- ------ -- ------ ---- ------- ----- -- -- -
----- --- - ---------------------------
----- ------ - -------------- --------- ----
------------------------------------- ---------------
---
--使用 Jest 进行测试
Enzyme 和 Jest 是非常好的组合，Jest 是一个测试框架，它提供了一些比较方便的测试工具和 API。这里我们将使用 Jest 完成这个例子的测试代码。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ -------- ---- ----------------------
------ --- ---- --------
------------- ----------- -- -- -
--- ----
------------- -- -
--- - ------------ ----
---
---------- ------ ----------- -- -- -
----- ---- - -------------------- -------------
-------------------------------
---
---------- -------- ----- -- ------ ------- -- -- -
----- ------ - -------------------
-------------------------
-------------------------------------------- ----
---
---------- ------ ----- -- ----- -------- -- -- -
----- ----- - ------------------
------------------------ - ------- - ------ ---- ------ - ---
--------------------------------------- --------
---
--上面的代码测试了一个简单的计数器应用，包括根据点击按钮更新计数器、根据输入框更新标题等功能。
总结
使用 Enzyme 可以方便地进行 React 组件的测试，三种渲染方式也可以满足不同的测试需求。在开发过程中，测试是一项非常重要的任务，能够大大提高代码的质量和可测试性。在使用 Enzyme 的过程中，我们还需要注意一些细节问题，比如遵循单一职责原则，这样才能使测试更加准确和有意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653969877d4982a6eb2b6f7c