React Native是一种利用JavaScript构建本地移动应用程序的框架。React Native的流行度在不断增长，因为它使开发人员可以编写一次代码并在多个平台上运行。然而，与任何应用程序开发一样，确保React Native应用程序的质量，通过单元测试是必不可少的。
在本篇文章中，我们将探讨如何使用Jest和Enzyme进行React Native应用程序的单元测试。我们将覆盖Jest和Enzyme的基础知识，并提供一些实用的示例和技巧。
Jest
Jest是Facebook开发的一个基于Jasmine的测试框架。Jest是React Native的默认测试框架。它具有简单的语法，自动mocking和快速执行速度。
安装和配置
在React Native应用程序中使用Jest非常简单。首先，我们需要使用Yarn或npm来安装Jest。
yarn add jest --dev // 或者 npm install jest --save-dev
一旦我们完成了Jest的安装，我们需要像下面这样在package.json文件中指定我们的测试脚本。
{
"scripts": {
"test": "jest"
}
}这将允许我们在控制台中运行yarn test或npm test命令来运行我们的测试脚本。
编写测试
我们将从编写一个简单的测试用例开始。在我们的App.test.js文件中，我们将编写一个测试来确保我们的组件能够正常渲染。
import React from 'react';
import App from '../App';
import renderer from 'react-test-renderer';
it('renders correctly', () => {
renderer.create(<App />);
});在这个测试中，我们首先导入了React和我们要测试的组件-App。然后，我们使用react-test-renderer来创建一个渲染器，并将我们的组件作为参数传递给它。最后，我们断言没有抛出异常来表明我们的组件已成功渲染。
如果我们运行yarn test或npm test，我们应该看到我们的测试通过了。
快照测试
快照测试是一种在代码更改后检测组件是否与以前的版本相同的测试。Jest具有内置的快照测试功能，可以使用toMatchSnapshot()方法来捕获我们要测试的组件的当前状态并将其与以前的版本进行比较。
在我们的App.test.js文件中，我们将为App组件编写一个快照测试。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ --- ---- --------- ------ -------- ---- ---------------------- ----------- ----------- -- -- - ----- ---- - -------------------- ------------- ------------------------------- ---
在这个测试中，我们使用renderer创建了一个树形结构，并将组件App传递给它。然后，我们使用toJSON()方法将树形结构转换为JSON对象。最后，我们使用toMatchSnapshot()方法来验证树形结构与以前的版本是否相同。
如果我们运行测试时，我们将看到一个快照文件被创建在我们的项目中。每次运行测试时，Jest会自动对比我们的组件与以前的版本，如果有变化，就会提示我们更新快照文件。
Mocking
Mocking是指在测试中将被测函数的依赖项替换为虚拟实现的过程。这样可以使我们的测试变得更容易，因为我们可以精确地控制我们的代码逻辑，并且不必担心外部依赖项的变化。
例如，如果我们想确保我们的API请求工作正常，而我们又不想每次测试时都依赖于API返回的状态。我们就可以使用Mocking来模拟API请求，而不必依赖于实际API。
在这个例子中，我们将创建一个虚拟的API请求，并将其用作我们测试的依赖项。
-- -------------------- ---- -------
------ ----- ---- --------
------ --- ---- ---------
------ -------- ---- ----------------------
------------------ -- -- --
---- ---------- -- ----------------- ----- -- ---
----
--------------- -- -- -
----------- ----------- ----- -- -- -
----- ---- - -------------------- -------------
-------------------------------
---
---在这个测试中，我们使用jest.mock()和模拟的axios库创建了一个虚拟的API请求。这个虚拟请求返回一个空对象。在我们的测试中，我们使用它来模拟API请求，而不必担心实际API的状态。
Enzyme
Enzyme是一种流行的React组件测试库，可以帮助我们验证组件的行为和状态。它特别适用于测试React的UI组件，包括呈现逻辑的测试和与组件进行交互的测试。
安装和配置
在React Native应用程序中使用Enzyme非常简单。我们只需要安装必要的Enzyme库，然后添加一个适当的适配器即可。
首先，我们需要使用Yarn或npm安装Enzyme。
yarn add enzyme --dev // 或者 npm install enzyme --save-dev
然后，我们需要添加适当的适配器。由于React Native不支持DOM，我们需要使用Enzyme的react-native适配器。
yarn add @wojtekmaj/enzyme-adapter-react-17 --dev // 或者 npm install @wojtekmaj/enzyme-adapter-react-17 --save-dev
一旦我们完成了Enzyme的安装和配置，我们就可以开始编写测试了。
编写测试
我们将从编写一个简单的测试用例开始。在我们的App.test.js文件中，我们将编写一个测试来通过调用setState()函数确保组件能够更改状态。
-- -------------------- ---- -------
------ ----- ---- --------
------ --- ---- ---------
------ - ------- - ---- ---------
--------------- -- -- -
------------ ----------- -- -- -
----- ------- - ------------ ----
----------------------------------- ----
---------------------------------------
---
---在这个测试中，我们使用shallow()方法创建了一个shallow wrapper，并将组件App传递给它。然后，我们调用setState()函数，并传递一个对象，以更改count状态。最后，我们使用state()方法来获取state的当前值，并使用toBe()断言确保它等于1。
面向行为的测试
面向行为的测试是一种针对组件行为的测试。这意味着我们将验证组件是如何处理用户事件的，而不是关注组件如何呈现UI。
在这个例子中，我们将为一个名为Button的组件编写一个面向行为的测试。我们将验证当用户单击按钮时，它将触发相应的事件。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ------------
------ - ----- - ---- ---------
------------------ -- -- -
----------- ------- -- -- -
----- ------ - ----------
----- ------- - ------------- ---------------- ----
--------------------------
----------------------------------
---
---在这个测试中，我们使用mount()方法创建了一个mount wrapper，并将组件Button和一个名为mockFn的虚拟函数传递给它。然后，我们使用simulate()方法来模拟用户的单击事件，并使用toHaveBeenCalled()断言来确保我们的虚拟函数已经被调用。
结论
在React Native应用程序中，单元测试是确保应用程序质量的关键步骤。使用Jest和Enzyme，我们可以编写高质量、可维护的测试用例，以确保我们的应用程序始终处于最佳状态。
本文介绍了Jest和Enzyme的基础知识，以及如何编写简单的测试用例、快照测试和面向行为的测试。希望这篇文章能为React Native开发人员提供有用的指导，并帮助他们构建高质量的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677477c96d66e0f9aaed6457