React JS作为一种高效、灵活且易于维护的JavaScript库已成为现代Web应用程序开发中的不二之选。随着React应用程序规模的不断增大，开发人员需要确保应用程序的质量和稳定性。在这里，单元测试就显得尤为关键了。而React在单元测试领域的重要性不言而喻，它可以让你在保持代码质量的同时保持代码的可维护性，进一步提高代码调试和性能优化的效率，而Enzyme正是一个可以为React应用程序进行单元测试提供帮助的工具。
什么是Enzyme？
Enzyme是一个由Airbnb开发的React测试工具，它通过提供易于使用的API，使得React组件测试变得轻松而直接。处理React组件的测试可以变得高效、更精确，因为Enzyme提供了一系列直观的针对React组件的测试助手方法。
Enzyme的API
Enzyme基于链式调用的方式，提供可读性高、直观易懂的API。
shallow()
shallow方法渲染一个组件的单层，不会渲染组件嵌套子组件，可以方便地调用组件的props、state和生命周期。
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ ------------- ---- ------------------
------------------------ ---- -- -- -
----------- ----- ---- -- ------------ -- -- -
----- ------- - ---------------------- ----
----------------------------------------------
---
---mount()
mount方法渲染该组件及其子组件，适用于测试由多个组件组成的应用程序。此示例中应注意确保存根数据准确的显示。
-- -------------------- ---- -------
------ - ----- - ---- ---------
------ ------------- ---- ------------------
------------------------ ---- -- -- -
----------- ----- ---- -- ------------ -- -- -
----- ------- - -------------------- ----
----------------------------------------------
---
---render()
render方法仅仅渲染组件渲染结果，这可以被用于测试其它渲染结果。
-- -------------------- ---- -------
------ - ------ - ---- ---------
------ ------------- ---- ------------------
------------------------ ---- -- -- -
----------- ----- ---- -- ------------ -- -- -
----- ------- - --------------------- ----
----------------------------------------------
---
---.find(selector)
返回一个新的Wrap指示它包含符合选择器情况的子节点。
-- -------------------- ---- -------
------ - ----- - ---- ---------
------ ------------- ---- ------------------
------------------------ ---- -- -- -
----------- ----- ---- -- ------------ -- -- -
----- ------- - -------------------- ----
-------------------------------------------------------
---
---.text()
返回渲染字符串文本，去除HTML实体字符。
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ ------------- ---- ------------------
------------------------ ---- -- -- -
---------- ------- ------- ------ -- -- -
----- ------- - ---------------------- ----
----- ---- - --------------------------
---------------------------- ---------
---
---Enzyme和React的深度集成
对于在React-component和其组合使用时，我们为了更好的测试代码需要自定义selectors的情况，可以自己进一步去写复杂的选择器进行查询，这样的话代码本身的可读性就变得很差。比较好的解决方案是尝试在集成Enzyme的过程中使用较为先进的测试工具，例如webpack、babel等工具，通过这些工具将Enzyme接口进行固定，还可调整Enzyme的模版使其能够更为便于集成。
例子
假设要编写一个简单的TodoList Application，那么我们可以将其代码编写为如下：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
----- -------- - -- -- -
----- ------- --------- - -------------
----- --------- ----------- - -------------
----- ------------------- - - -- ---------------------------
----- ------------- - -- -- -
------------------- ----------
---------------
--
------ -
-----
----
--------------- -- -
--- ----------------------
---
-----
------
-----------
---------------- -----
---------------
------------------------------
--
------- ----------------------- --------------------
--- ----
---------
------
--
--
------ ------- ---------如何编写相应的测试代码，接下来我们就可以通过Enzyme完成：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ -------- ---- ---------
-------------------- -- -- -
----------- ----------- -- -- -
----- ------- - ----------------- ----
----------------------------------
---
--------------- ---- -- ----- ------ -- -- -
----- ------- - ----------------- ----
-------------------------------------------
---
-------- - ---- -- --- ------ -- -- -
----- ------- - ----------------- ----
----- --------- - ----------------------------
----- ------ - -----------------------------
---------------------------- - ------- - ------ ----- ----- - ---
---------------------------------------------- -------
-------------------------
--------------------------------------------- --------
---
---结论
在React单元测试中使用Enzyme这一过程如同把询问变得简单直观，这个过程实际上就是一个更加便捷的体验；Enzyme推崇的API并非强制性规定，而是根据书写代码过程中的需要，进行相应地组合使用，这样可以最大程度地满足React组件开发所需要的测试覆盖。Enzyme不仅能为React单元测试提供便利，对于React组件的渲染和测试是非常有利的，为开发人员节省时间和精力，同时提高测试的质量和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672b42a6ddd3a70eb6d2518b