Enzyme + React Native：如何测试异步更新的视图
在 React Native 开发中，异步更新的视图是一种常见且必不可少的情况。然而，这也会带来一些测试的挑战。本文将介绍如何使用 Enzyme 来测试 React Native 应用程序中的异步更新视图。我们将建立一个简单的“计时器”应用程序，并展示如何使用 Enzyme 和 React Native 测试库来测试其 AsyncStorage 状态的更改。
引入 Enzyme
首先，我们需要在项目中引入 Enzyme。Enzyme 是一个供 React 应用程序使用的 JavaScript 测试实用程序。它为 React 组件提供了一组强大的工具，帮助您更轻松地进行单元测试。
在 React 应用程序中使用 Enzyme 的第一步是安装它。使用以下命令安装 Enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16 react-test-renderer
接下来，您需要配置 Enzyme 以在项目中使用 React 16+。在项目根目录中创建一个名为“setupTests.js”的文件，并将以下内容添加到文件中：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });现在，我们已经准备好开始编写测试了。
创建计时器应用程序
我们将开始创建一个简单的计时器应用程序，该应用程序使用 AsyncStorage 来存储计时器的当前时间。当计时器开始时，它将在每秒钟更新一次存储在 AsyncStorage 中的时间。我们将展示如何使用 Enzyme 测试存储在 AsyncStorage 中的时间更新是否按预期进行。
首先，我们需要创建一个名为“Timer.js”的 React Native 组件。该组件将渲染一个文本标签，显示存储在 AsyncStorage 中的时间。代码如下：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ - ----------- ----- ----- ------------ - ---- ---------------
------ ------- -------- ------- -
----- ------ -------- - ------------ --------
------------ -- -
----- -------- - -------------- -- -
----- ------- - --- -------
---------------------------- --------------------
-----------------
-- ------
------ -- -- ------------------------
-- ----
------ -
----- -------------------------
------------------------------
-------
--
-
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
-
---在此代码中，我们导入 React、useState、useEffect、Text、View 和 AsyncStorage 组件。我们定义了一个名为“Timer”的函数式组件，它接受一个 state 变量“time”，该变量初始值为当前日期（创建组件时初始值）。在 useEffect 钩子函数中，我们创建了一个名为“interval”的 setInterval 集合，该集合每秒更新一次“time”变量，并将其存储在 AsyncStorage 中。该组件最终呈现了一个文本标签，它显示存储在 AsyncStorage 中的时间。
现在，我们已经创建了一个定时器组件，让我们使用 Enzyme 和 React Native 测试库来检查它的行为是否按预期进行。
测试
我们将使用 Enzyme 和 React Native 测试库创建两个测试：
- 测试 AsyncStorage 是否按预期更新。
- 测试计时器组件是否按预期更新。
测试 AsyncStorage
我们将首先编写一个测试，测试我们的 AsyncStorage 是否按预期更新。我们将使用 Jest 和 react-native-testing-library 库编写测试。以下代码是测试“time”变量是否被更新并存储在 AsyncStorage 中的示例：
-- -------------------- ---- -------
------ ---------------
------ ----- ---- --------
------ ----- ---- -----------
------ ------------ ---- --------------------------------------------
------ - ------ - ---- -------------------------------
-------------------------------------------------------
------------------------ -- -- -
---------- ------ ---- -- ----- ------- ----- -------- -- -- -
------------- ----
----- ---- - --- ------------------
---------------------------------------------
------------- -- -
--------------------------------------------------------- --------------------
-- ------
---
---在此代码中，我们首先导入 React、Timer、AsyncStorage 和测试库，然后仿真 AsyncStorage。我们定义了一个名为“AsyncStorage”的测试套件，它包含一个名为“should update time in async storage every second”的测试。该测试通过调用“render”函数来渲染 Timer 组件。我们创建了一个名为“time”的常量，它包含当前日期的字符串表示形式。我们通过模拟返回该字符串的 AsyncStorage.getItem 方法来设置“time”变量的值。最终，我们通过在 2 秒钟后使用 setTimeout 函数来检查 AsyncStorage.setItem 方法是否被调用，并使用“toHaveBeenCalledWith”函数检查它是否接收了正确的参数。
测试计时器组件
我们将创建的第二个测试将测试计时器组件是否按预期进行更新。以下是示例测试代码：
-- -------------------- ---- -------
------ ---------------
------ ----- ---- --------
------ ----- ---- -----------
------ ------------ ---- --------------------------------------------
------ - ------- --------- - ---- -------------------------------
-------------------------------------------------------
----------------- -- -- -
---------- ------ --------- ---- ------- ------- -- -- -
----- - ------ - - ------------- ----
-----------------------------------
---
---------- ------ --- ---- ----- -------- ----- -- -- -
------------- ----
----- ----------- - ---------------------------------------------- --------------------
----- ----------- - --- -------
----- ---------------------------- ------------------------
----------------------------------------------------------
----- ---- - ----- -----------------------------
---------------------------------------------
----- -------- - --- --------
----- ---- ------ - -------- -- ----- -
-------- - --- -------
-
----- -------- - ----- -----------------------------
-----------------------------------------------------
------------------------------------------
---
---在这个例子中，我们使用 Jest 和 react-native-testing-library 库编写了两个测试：
- 测试计时器组件是否按预期进行更新。
- 测试计时器组件是否能够正确呈现。
我们定义了一个名为“Timer”的测试套件，它包含两个测试。第一个测试生成快照并使用“toMatchSnapshot”函数进行比较，以确保组件可以正确呈现。第二个测试呈现 Timer 组件，并使用 AsyncStorage.setItem 函数设置初始时间。然后，我们使用“expect”函数确保 AsyncStorage.getItem 函数被调用，并使用“toEqual”函数确保时间与上次一致。最终，我们使用 while 循环模拟等待 2.5 秒钟，以便检查 AsyncStorage 是否更新了时间。
总结
测试异步更新的视图是 React Native 开发中的一个重要部分。在本文中，我们介绍了如何使用 Enzyme 和 React Native 测试库来测试 AsyncStorage 是否按预期更改，以及如何测试计时器组件是否按预期更新。如果您还没有尝试过使用 Enzyme 进行 React Native 测试，现在是个好时机去尝试一下！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6484131748841e989434149f