简介
在 React Native 开发中如何进行测试是一个需要解决的问题。测试是保证我们所开发的应用在不同场景下的正确性和稳定性的一个重要手段。其中，使用 Enzyme 进行组件测试能够提高我们的测试效率和测试覆盖度，从而避免不必要的人工测试。
Enzyme 是什么？
Enzyme 是一款 React 组件测试工具，可以快速且高效地进行组件的测试，市面上主流的 React Native 测试工具也都支持 Enzyme。
Enzyme 提供了几种渲染方式：
- 静态渲染：利用
shallow渲染只会渲染当前组件，不会渲染子组件。这种方式的渲染速度快。 - 全渲染：利用
mount渲染会渲染当前组件以及所有子组件。这种方式更适合于一些需要测试在挂载阶段对 DOM 的修改。 - 可寻址渲染：利用
render将组件渲染为一个静态的 HTML 页面。这种方式可以很好地模拟浏览器环境，并生成可供分析的 HTML 内容。
以下将会详细讲解 Enzyme 的使用方法。
安装
首先，你需要在你的项目中安装 Enzyme：
--- ------- ---------- ------
Enzyme 要求 React 版本为 16.8 或更高版本，如果你的 React 版本低于 16.8，请先升级 React。
接下来，你需要选择一个 Enzyme 的适配器。我们以 enzyme-adapter-react-16 为例。
--- ------- ---------- -----------------------
然后，在位于 tests/setupTests.js 文件中的设置代码中编辑如下内容：
------ ------ ---- --------- ------ ------- ---- -------------------------- ------------------ -------- --- --------- ---
进行上述设置后，Enzyme 就可以正常地工作了。
测试基础
了解了 Enzyme 的基础用法之后，让我们通过一些例子来了解 Enzyme 的使用过程。
首先，我们需要先安装一些开发必要的库：
--- ------- ---------- ----- ---- -----
这里，我们需要使用 mocha 做测试框架，chai 是断言库，sinon 是一个 Spies 模块，能够帮助我们监视一些方法是否被正确地调用了。
具体测试代码如下：
------ ----- ---- --------
------ ------- ---- --------------------------
------ - ---------- ------- - ---- ---------
------ ----- - ------ - ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ ---------- ---- ---------------
----------- -------- --- --------- ---
--------------------
--------------------- ---- -- -- -
----------- ----------- -- -- -
----- ------- - ------------------- ----
------------------------------------
---
---------- ---- ----------------- ---- ------ -- --------- -- -- -
----- ----------------- - ------------
----- ------- - ------------------- ------------------------------------- ----
-----------------------------------------
--------------------------------------------
---
---在该例子中，我们模拟了一个简单的计算器，验证了组件是否被正确地渲染出来以及在点击 “+” 按钮时组件是否能够正确地响应。
项目实战
在实际的开发中，我们会遇到各种各样的需要测试的场景。 在测试中我们同样时刻关注组件的渲染，前端业务逻辑实现是否正确等等。
以下给出一个基于 React Native 的示例代码，对组件的渲染和回调函数进行测试：
------ ----- ---- --------
------ ---- ---- ---------------------------------------------------
------ - ----- ----- ---------------- - ---- ---------------
------ - ---------- ----- - ---- ---------
------ ------- ---- --------------------------
------ ----- ---- --------
------ ------ ---- ---------
------ -------- ---- -------------
----------- -------- --- --------- ---
------------------- ---- -- -- -
---------- ------ ----------- ---- ----------- -- -- -
----- ------- - ------
---------
--------- --- - -----
-----------------
-------------------------------
----------------------
--
--
----- ----- - ------------------------- ------- ------- ---
---------------------------------------------------------------
-------------------------------------------------- --- - -------
-----------------------------------------------------------------------------------------
---
---------- ------- ----------------- ----- ---- -------- -- --------- -- -- -
----- ----------------- - ------------
----- ------- - ------
---------
--------- --- - -----
-----------------
-------------------------------------
----------------------
--
--
---------------------------------------------------------
--------------------------------------------
---
---------- ------- -------- ----- ---- ------ ---- -- --------- -- -- -
----- -------- - ------------
----- ------- - ------
---------
--------- --- - -----
-----------------
-------------------------------
-------------------
--
--
--------------------------------------------
-----------------------------------
---
---在这个测试代码中，我们使用了 mount 进行了全渲染，检查了组件内部的值是否正确，同时针对 onToggleCompleted 和 onDelete 事件进行了 mock 测试，验证这两个回调函数能否正确被触发。
总结
在 React Native 中进行测试，Enzyme 是一个非常好用的测试工具，本文介绍了 Enzyme 的基础用法，并结合实例完成了一个项目实战。通过以上实例，我们可以更好地了解，如何在 React Native 中运用 Enzyme 进行测试，验证我们开发的项目的正确性和稳定性，从而提高生产效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64cd55961519ea946c12ba6b