随着移动互联网的快速普及，React Native 成为移动端开发的热门选择。然而，在 React Native 的开发过程中，如何进行高效的测试是一个关键问题。在这篇文章中，我们将讨论如何使用 Enzyme 来进行 React Native 开发的快速实践。
什么是 Enzyme？
Enzyme 是一个由 Airbnb 开发的 JavaScript 测试工具，专门用于 React 和 React Native 应用程序的测试。它提供了一个简单的 API，与其他单元测试工具(CheckJS、Jest、Mocha、Chai等)结合使用，可以对 React 分量进行多种方式的测试。
Enzyme 的核心 API
- shallow
- mount
- render
使用不同的 API 对分量进行不同的渲染，从而测试分量的不同状态和交互效果。
安装环境
在开始我们的快速实践之前，我们需要设置 React Native 环境并安装 Enzyme。
设置 React Native 环境
React Native 提供了非常详尽的环境安装步骤，可以在 React Native 的官网中查看。
安装 Enzyme
在我们安装 Enzyme 之前，首先需要安装以下依赖项：
npm install --save-dev enzyme enzyme-adapter-react-16 react-test-renderer
以上命令将安装 enzyme 和 react-test-renderer（用于创建 React 分量的快照），以及与 react-16 兼容的适配器 enzyme-adapter-react-16。
接下来，我们需要在测试文件中配置 Enzyme：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });快速实践
在这个快速实践中，我们将创建一个简单的 todo 应用程序并对其进行测试。我们将创建以下两个主要组件：
TodoList：用于展示所有任务列表的组件TodoItem：用于展示单个任务的组件，并且可以通过单击任务标记完成。
在此之前，我们需要创建一个用于保存任务列表的 JavaScript 数组。
-- -------------------- ---- -------
----- ------------ - -
-
--- --
----- ----- ---
------- ------
--
-
--- --
----- ----- ---
------- -----
--
-
--- --
----- ----- ---
------- ------
--
--创建 TodoList 组件
首先，让我们创建一个用于显示所有任务列表的 TodoList 组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- --------- ---- - ---- ---------------
----- -------- - -- -------- -- -- -
------
---------
---------------
-------------------- -- -------------------
-------------- ---- -- -- -------------------------
--
-------
--
------ ------- ---------在此组件中，我们使用了 React Native 中的 FlatList 组件来渲染任务列表。
创建 TodoItem 组件
接下来，我们将创建 TodoItem 组件，用于展示单个任务，并且可以通过单击任务标记完成。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----- ----- ----------- ---------------- - ---- ---------------
----- ------ - -------------------
---------- -
-------- ---
------------------ --
------------------ -------
--
----- -
--------- ---
--
----- -
------------------- ---------------
--
---
----- -------- - -- ----- ---------- -- -- -
----- -------- ---------- - ----------------------
----- -------------- - -- -- -
----------------
-----------------
--
------ -
----------------- ------------------------ -------------------------
------
----- -------------------- ------ - ----------- - -------------------------
-------
-------------------
--
--
------ ------- ---------在此组件中，我们使用了 React Hooks 的 useState 来跟踪当前任务的“已完成”状态，并通过 TouchableOpacity 监听任务的单击事件。当任务被单击时，handleTaskDone 函数会被调用，并且会将任务作为参数传递给 onTaskDone 回调函数。
编写单元测试
现在，让我们编写单元测试，测试我们的 TodoList 和 TodoItem 组件。
首先，我们需要创建一个名为 Todo 的对象，它将负责管理我们 todo 应用程序中的信息。在这个对象中，我们将实现以下两个方法：
getTodoList：它将返回我们保存任务列表的数组。markTaskAsDone：它将通过任务 ID 将指定任务标记为已完成。
-- -------------------- ---- -------
----- ---- - -
-------------
------------ -------- -- -
------ ------------------
--
--------------- -------- ---------- -
----------------- - ---------------------------- --
------- --- ----------- - - -------- ------- ---- - - ----
--
--
--接下来，我们将编写测试用例，测试我们的两个组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ -------- ---- -------------
------ -------- ---- -------------
------ ---- ---- ---------
------------------ ----------- -- -- -
----------- - ---- -- ---- ------- -- -- -
----- -------- - -------------------
----- ------- - ----------------- ------------------- ----
----------------------------------------------
---
---
------------------ ----------- -- -- -
------------ --- ---- ------ -- -- -
----- ---- - - --- -- ----- ----- --- ------- ----- --
----- ------- - ----------------- ----------- ----
----------------------------------------------------- ----
---
--------- ---- -- ---- ---- --------- -- -- -
----- ---- - - --- -- ----- ----- --- ------- ----- --
----- -------------- - ----------
----- ------- - ----------------- ----------- --------------------------- ----
--------------------------
--------------------------------------------------
---
------------ ---- ---- ---- ------------ ---- ------ -- ------ -- -- -
----- ---- - - --- -- ----- ----- --- ------- ---- --
----- ------- - ----------------- ----------- ----
-----------------------------------------------------------
--------- ---
------------------- ---------------
---
---
---在我们的测试中，我们首先在 TodoList 组件上测试了我们的任务列表是否正确渲染。在第二个测试用例中，我们测试了我们的 TodoItem 组件，确保它显示了正确的任务。在第三个测试用例中，我们测试了当单击任务时，onTaskDone 回调函数是否被调用，并且正确的任务是否被传递给它。在最后一个测试用例中，我们测试了当任务已完成时，任务名称是否被正确地添加了删除线。
结论
Enzyme 是 React 和 React Native 开发的强大测试工具。在本文中，我们已经学习了如何使用 Enzyme 对 React Native 应用程序进行单元测试，以及如何测试 React Native 组件和交互。Enzyme 可以极大地加快测试的速度和质量，使我们能够更加自信地构建更好的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67189f34ad1e889fe22cdde7