简介
Enzyme 是 Facebook 开发的一个 React 测试工具集，能够帮助我们编写高质量、可维护的 React 组件测试代码。Enzyme 的使用简单、灵活性高、特性齐全，可以让我们在编写 React 组件时轻松地测试组件的渲染、交互、行为等方面的各种情况。
在本文中，我们将介绍如何使用 Enzyme 来测试一个样例网站的 React 组件，并指导读者如何更好地利用 Enzyme 来写出更健壮的测试用例。
环境搭建
开启命令行窗口，执行以下命令来安装 Enzyme 和 React，依赖是 mocha
npm install --save-dev enzyme react react-dom mocha
具体实现
我们来看一个示例, 测试 Card 组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -------
------ - ----- - ---- ---------
------ ---- ---- ---------
--------------- ---- -- -- -
---------- -- ----- ------- -- -- -
--------- -- ----------- --------------------
---
---------- ------- ----- --- ------------- -- -- -
----- ------- - ----------- ------------- ------------------- ----
--------------------------------------------
---------------
------------
-------------------
---
------------- ----- -------- -- -- -
----- ------------- - ------------
----- ------- - ----------- ----------------------------- ----
-----------------------------------------
--------------------------------------------------- ---
---
---这里我们测试了三个方面: 能否正常渲染；title 和 description 传参正确；Button 的 click 事件的监听。
- 第一个测试中我们发现在这个 Case 只要不抛出错误我们就认为测试通过了。
- 第二个测试是对于传入参数的评估，我们测试在参数传入的情况下是否渲染正确。
- 最后一个测试是事件的监听。这里我们使用了另一个工具 sinon.js 来 spyOn 方法并监听 click 的调用次数。
通过这三个测试，便可评估 Card 组件的全部功能。
同时我们要注意 expect 可能涉及到的 sync/async 问题，这时候可以使用 async/await 并用 try/catch 包括 expect。
-- -------------------- ---- -------
--------- ------ ----- ---------- -
----- ------- - ----- ----------- ---
--- -
-- -- ---------
---------------------------------------------
- ----- --- -
-- ---- ----- ---- -- ------ --- ------ -- --- ---- ------
-------
-
---总结
在此，我们简单介绍了如何使用 Enzyme 测试 React 组件，希望能够有助于您更好地编写测试代码，提供稳定性和测试覆盖度。同时我们也很期待您在实际项目中的应用，Enzyme 也提供了更多的测试方式供你使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6539d6807d4982a6eb367ef7