简介
Enzyme 是一个用于 React 测试的 JavaScript 工具库。它允许您在渲染组件的同时进行测试，并且可以轻松地模拟虚拟 DOM 的各个方面。而在 React 中，函数组件是最常见的组件形式。本文将介绍如何在函数组件中使用 Enzyme 进行渲染并测试。
安装 Enzyme
首先，我们需要安装 enzyme 和 enzyme-adapter-react 库。可以使用 npm 或 yarn 进行安装：
--- ------- ---------- ------ -----------------------
或
---- --- ----- ------ -----------------------
在安装完毕后，我们需要在测试文件的顶部导入 Enzyme 和适当的适配器：
------ ------ ---- --------- ------ ------- ---- -------------------------- ------------------ -------- --- --------- ---
测试函数组件
下面是一个简单的函数组件：
------ ----- ---- --------
------ --------- ---- -------------
----- -------- - -- ---- -- -- -
------ -
-----
---------- ------------
------
--
--
------------------ - -
----- ---------------------------
--
------ ------- ---------我们可以使用 shallow 方法进行测试，该方法可渲染组件并返回其虚拟 DOM 对象。例如：
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ -------- ---- -------------
------------------ -------- --- --------- ---
-------------------- -- -- -
----------- --- ------- ---------- -- -- -
----- ------- - ----------------- ------------ ----
----- -------- - ---------- ------------
-------------------------------------------------
---
---shallow 方法只是渲染出了组件的顶层部分，因此它非常适合于测试功能，如属性传递、子组件等。但是如果你需要测试一些更深入的渲染逻辑，可以使用 mount 方法。例如：
------ ----- ---- --------
------ ------- - ----- - ---- ---------
------ ------- ---- --------------------------
------ -------- ---- -------------
------------------ -------- --- --------- ---
-------------------- -- -- -
----------- --- ------- ---------- -- -- -
----- ------- - --------------- ------------ ----
----- -------- - ---------- ------------
-------------------------------------------------
---
---当您使用 mount 方法时，它将完整地渲染组件并返回其完整的虚拟 DOM 对象。请注意性能问题。
测试状态更新
在 React 中，状态是一个非常重要的概念。我们可以使用 Enzyme 来测试当我们更新状态时，组件的行为是否符合我们预期。
考虑以下组件：
------ ------ - -------- - ---- --------
----- ------- - -- -- -
----- ------- --------- - ------------
----- -------------- - -- -- -------------- - ---
------ -
-----
----------------
------- -------------------------------------------
------
--
--
------ ------- --------我们可以使用 setState 方法来测试组件的状态更新是否按预期进行：
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ------- ---- ------------
------------------ -------- --- --------- ---
------------------- -- -- -
-------------- --- ----- ---- --- ------ -- --------- -- -- -
----- ------- - ---------------- ----
----- ------ - -----------------------
-------------------------
-----------------------------------------------
---
---如果您有很多状态更新，可以使用 mount 方法（请注意性能）：
------ ----- ---- --------
------ ------- - ----- - ---- ---------
------ ------- ---- --------------------------
------ ------- ---- ------------
------------------ -------- --- --------- ---
------------------- -- -- -
-------------- --- ----- ---- --- ------ -- --------- -- -- -
----- ------- - -------------- ----
----- ------ - -----------------------
-------------------------
-----------------------------------------------
---
---结论
在本文中，我们介绍了如何在函数组件中使用 Enzyme 进行测试。通过模拟虚拟 DOM 的各个方面，Enzyme 可以让我们轻松地测试 React 组件的各个方面，例如状态更新、属性传递等。我们可以使用 shallow 或 mount 方法来渲染组件并测试其行为。
参考
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673440b40bc820c58247d6a1