在前端开发中，测试是一个极其重要的部分。针对于 React Native 应用，测试可以帮助我们快速的发现问题，并帮助我们更好地维护应用的质量。在这篇文章中，我们将会使用 Enzyme 和 Jest 这两个知名的测试框架，来讲解如何测试 React Native 应用。
准备工作
在开始测试之前，我们需要先准备好测试环境和所需的库。以下是需要使用到的库。
- jest
- enzyme
- react-test-renderer
- @testing-library/react-native
- @babel/plugin-transform-modules-commonjs
- @babel/preset-env
当然，这些库的安装命令可以使用 yarn 和 npm 来完成。
- -- --- -- --- ------- ---------- ---- ------ ------------------- ----------------------------- ---------------------------------------- ----------------- - -- ---- -- ---- --- ----- ---- ------ ------------------- ----------------------------- ---------------------------------------- -----------------
如上所述，我们首先需要安装 Jest 和 Enzyme，然后我们还需要安装 react-test-renderer 和 @testing-library/react-native。这些库都是帮我们进行测试所需要的工具和设置。
编写测试
在安装所有依赖之后，我们需要编写我们的测试用例主文件。我们可以在项目根目录下创建一个名为 __tests__ 的目录，用于存放我们的测试用例文件。
我们将使用一个简单的组件作为测试用例，来讲解如何使用 Enzyme 和 Jest 进行测试。
------ ------ - -------- - ---- --------
------ - ----- ----- --------- - ---- ---------------
----- ------- - -- -- -
----- ------- --------- - ------------
----- --------------- - -- -- -------------- - ---
----- --------------- - -- -- -------------- - ---
------ -
------
------------ --------------
----- -------- -------------- ----- ---
---------- ------------------------ --
----- -------- -------------- -------- ---
------- --------- ------------------------- --
------- --------- ------------------------- --
-------
-------
-------
--
--
------ ------- --------这个组件非常简单，它将 count 值显示在一个 Text 组件中。TextInput 组件将 count 的值作为它的 value 值，而两个 Button 组件则用于增加或减少 count 的值。
接下来，我们将撰写我们的测试用例：
tests/Counter.test.js
------ ----- ---- --------
------ ------- ---- -------------
------ - ------- - ---- ---------
------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ---------------- ----
----------------------------------
---
---------- ------ ----- -- --------- ------ ------- -- -- -
----- ------- - ---------------- ----
------------------------ -- ------------------ --- -----------------------
-------------------------------------------------------------- -- ----
---
---------- ------ ----- -- --------- ------ ------- -- -- -
----- ------- - ---------------- ----
------------------------ -- ------------------ --- -----------------------
-------------------------------------------------------------- -- -----
---
---在上面的测试用例中，我们包含三个测试：
- 第一项测试，是用来测试组件的快照是否正确。
- 第二项和第三项测试，分别用于测试组件是否能够正确的响应按钮的点击事件，即增加或减少 count 值。
由于此处我们使用了 shallow 函数，因此我们只测试了 Counter 组件的一层，而并没有去测试子组件。
在我们执行测试之前，我们还需要添加一个 jest.config.js 文件。这个文件将帮助我们对测试进行相关的配置。
jest.config.js
-------------- - -
---------- -
------------ -------------
--
---------- ------------------------------------
--------------------- ------ ------- ------ --------
------- --------------------
------------------- -----------------------------------------------------
--配置中的几个关键设置包括：
transform：指定使用 Babel 进行编译。testRegex：指定测试文件路径，用于 Jest 在测试时查找文件。moduleFileExtensions：指定可以进行测试的文件类型。preset：指定我们需要执行的测试之前，要使用哪种类型的预设。setupFilesAfterEnv：指定测试之前，需要执行哪些操作。
运行测试
当一切都准备好了之后，我们就可以开始运行测试了。
--- --- ----
或
---- ----
在测试运行完毕后，我们就可以看到以下结果：
---- -------------------------
-------
- ------ ------ --------- ------
- ------ ------ ----- -- --------- ------ ----- ------
- ------ ------ ----- -- --------- ------ ----- -----
---- ------- - ------- - -----
------ - ------- - -----
---------- - ------- - -----
----- ----- -运行结果显示，我们的三个测试都已成功通过。
总结
使用 Enzyme 和 Jest 测试 React Native 应用非常简单，而且还能够帮助我们提高开发效率以及整个应用的质量。有关此主题的更多深度细节和指导请看官者可以参照 Enzyme 和 Jest 的文档进行深入学习，以更好地提高自身的移动端开发能力。
完整代码请访问 Github。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65b5843eadd4f0e0ffe43f93