Enzyme 和 Jest 的 React Native 应用测试初步实践
React Native 是一种流行的跨平台移动应用程序开发框架，已经被大量使用在制作各种类型的应用程序。如何有效地测试 React Native 应用程序成为很多开发者们面临的挑战。Enzyme 和 Jest 是经典的 React Native 应用程序测试工具，在这篇文章里，我们将会学习如何使用 Enzyme 和 Jest 进行 React Native 应用程序的测试，并探索其深度和学习以及指导意义。
什么是 Enzyme 和 Jest？
Enzyme 和 Jest 是 React Native 测试工具中，最流行的工具之一。Enzyme 使用了一个简单易用的 API，可以对 React Native 组件进行快速、可靠、可重复性测试。Enzyme 提供了三个 API 胶水测试工具 Shallow, Mount, Render，可以模拟渲染，使你可以在测试组件的时候观察到组件内部和组件结果的渲染结果并且提供了很好的调试帮助。Jest 是一个快速、直观、功能齐全的测试框架。它支持自动化测试，覆盖率测试和快照测试，并提供社区插件，可以方便地进行代码检测、单元测试、集成测试等。
安装依赖
在使用 Enzyme 和 Jest 进行 React Native 应用程序的测试之前，我们需要安装相关依赖。
要运行 Jest ，我们需要安装 Jest 及其相关的依赖。
yarn add -D jest babel-jest @babel/core @babel/preset-env react-test-renderer eslint-plugin-jest
然后我们还需要安装 Enzyme：
yarn add enzyme react-addons-test-utils enzyme-adapter-react-16 --dev
配置
为了让 Enzyme 生效，我们需要在 setupTests.js 中配置Enzyme 适配器：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });然后在 package.json 文件中配置 Jest 测试启动参数：
-- -------------------- ---- -------
---------- -
------- ------
--
------- -
--------- ---------------
--------------------- --------------------
-------------------------- -
--------------------------------------------------------------------------------
-
-开始测试
现在我们可以开始测试了，为了演示，我们可以创建一个简单的 React Native 组件 (“HelloWorld.js”)，如下所示：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ---- - ---- ---------------
------ ------- ----- ---------- ------- --------- -
-------- -
------ -
------
----------- -------------
-------
--
-
-然后我们会创建一个 HelloWorld.test.js 文件，然后编写一个测试使它通过：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ---------- ---- ---------------- ------ -------- ---- ---------------------- ----------- ----- ------- ----------- -- -- - ----- ---- - --------------------------- ------------- ------------------------------- ---
关键在于，我们使用了 React TestRenderer 中的 renderer API 来创建并渲染组件，将其输出为 JSON，然后比较该输出与快照（snapshot），以确保它渲染了预期的内容。当运行测试后，Jest 会把快照保存起来，以便于后续测试可以使用。如果在改动代码时做出了不符合预期的修改，Jest 的快照测试功能会提醒我们当前的测试用例已失败。
深入
现在，我们已经了解如何在 React Native 应用程序中使用 Enzyme 和 Jest 进行测试。但是，这还远远不够。为了更好地理解这些工具，可以继续进行一些更深入的实践。
例如，现在我们可以创建一个带有状态和模拟事件的组件，然后测试它的输出和响应行为。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ----- ---------------- - ---- ---------------
------ ------- ----- ---------- ------- --------- -
----- - -
------ --
--
------- - -- -- -
--------------- ------ ---------------- - - ---
--
-------- -
----- - ----- - - -----------
------ -
------
------------ --------------
----------------- -----------------------
----------------------
-------------------
-------
--
-
-然后我们来编写测试用例：
-- -------------------- ---- -------
------ ---------------
------ ----- ---- --------
------ ---------- ---- ---------------
------ --------- ---- ---------
--------------- ------- -- -- -
----------- --- ---- ------- ---- -- -- -
----- ------- - ------------------- ----
----- ---- - ----------------------------------------------
---------------------------- ----
---
-------------- --- ----- ---- --------- ------ -- --------- -- -- -
----- ------- - ------------------- ----
---------------------------------------------------
-----------------
----- ---- - ----------------------------------------------
---------------------------- ----
---
---其中，我们使用了 Enzyme API 中的 shallow 来渲染组件，模拟了一个 onPress 事件 并且测试是否能成功更新组件中的状态。
结论
Enzyme 和 Jest 是 React Native 应用程序测试过程中最常用的工具。使用它们可以很容易地创建测试用例并进行覆盖率测试。当我们为应用程序编写测试时，它们不仅可以确保代码的质量，还可以为我们提供一个完整的测试用例，以便于未来维护和改进。同时，在测试过程中，它们也可以提高我们对 React Native 组件和状态的理解，并改善我们的代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6711efc8ad1e889fe201a906