前言
React Native 是一个流行的使用 JavaScript 编写原生应用的框架。测试是应用开发的关键，能够保障应用的质量，避免代码上线出现各种问题。本文将介绍如何使用 Jest 进行 React Native 测试，帮助读者提高测试知识和技能，减少应用上线带来的风险。
Jest 简介
Jest 是 Facebook 开发的一个 JavaScript 测试框架，旨在提供简单的 API 和易于维护的测试代码。它支持各种类型的测试，包括单元测试、集成测试和端到端测试，并且支持了 React Native 以及其他创建 UI 的工具，例如 React。
Jest 的优势
- 快速执行：Jest 通过运行测试并在内存中执行测试案例来减少测试时间。
- 易于设置：Jest 能够快速使用，因为它并不需要额外的配置，您只需安装 Jest 并运行即可。
- 提供多种测试类型：Jest 支持单元测试、集成测试、端到端测试等多种测试类型，可支持不同规模的应用程序。
如何使用 Jest 进行 React Native 测试
安装 Jest
若您还没有安装 Jest，请在命令行中输入以下命令进行安装：
npm install --save-dev jest
运行 Jest 测试
- 您可以在命令行中使用以下命令运行所有测试：
npm test
- 您也可以重新定义 npm 脚本，以允许更具体的测试命令。请更新 package.json 文件中的 scripts 属性，如下所示：
"scripts": {
"test": "jest",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage"
}- 如果您要测试指定的文件或部分，请在命令行中输入以下命令：
jest /path/to/test/file.js
基本测试实例
以下是一个 React Native 组件的简单测试：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- ---------------
------ -------- ---- ----------------------
----------------- ---- ----------- -- -- -
----- ------------- - -------------------------- ----------------------
----------- ----------- -- -- -
----------------------------------------
---
------- --- ------- ------ -- -- -
-------------------------------------------- -------
---
---- 首先，我们导入库以便在测试中使用。
- 接下来描述了这个测试模块的整体行为及测试。
- 在测试模块中定义了一个变量 textComponent，该变量使用 create 方法创建一个实例化的 Text 组件，并将其转换为 JSON 格式。
it表示一个单元测试用例，接收描述和测试方法两个参数。- 上面定义了两个测试用例，分别测试组件是否正确渲染，以及组件是否有正确的文本。
自动化测试示例
In-domain automation 是一个自动化测试框架，它专门针对 React Native 应用程序。它提供了许多测试工具，但仅在组件可操控的范围内使用（即不包括 API 集成测试）。以下是自动化测试示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- ---------------
------ -------- ---- ----------------------
------ ------------------ ---- -----------------------
----------------- ---- --------- ---- --------- ------------ -- -- -
----- ---------- - --- -------------------
---------- ------------
--------------
--
----------- ----------- -- -- -
------------------------------------------------------
---
------- --- ------- ------ -- -- -
---------------------------------------- -------
---
---- 首先我们导入所需的资源并描述测试模块。
- 接下来，我们在变量 automation 中创建一个测试实例。我们在实例上指定了被测试的组件和一个字符串（它将被使用脚本中的一些测试描述中引用到）。
- 与基本测试实例相似地，上面定义了两个测试用例，分别测试组件是否正确渲染，以及组件是否有正确的文本。
使用 Jest 的 Mock API 进行测试
- 使用 Jest 的 Mock API 进行测试，您需要首先导入 mock 函数，并使用 jest.fn() 来创建您的函数。
const mockFunction = jest.fn();
- 将 mock 函数传递给组件，并在测试中执行操作后查看是否已调用该函数：
it('calls my function on button press', () => {
const component = renderer.create(
<Button onPress={mockFunction} title="Press Me" />,
);
const button = component.root.findByType(Button);
button.props.onPress()
expect(mockFunction).toHaveBeenCalled();
});使用 Jest 的 Snapshot 进行测试
Jest 提供了一种称为 “快照” 的方法，它允许我们轻松地测试组件的特征，例如样式、表现和 prop 值。
- 使用 Jest 创建一个快照：
it('renders correctly', () => {
const tree = renderer.create(<Button title="Press Me" />).toJSON();
expect(tree).toMatchSnapshot();
});- 每次运行测试时，Jest 均会检测快照文件的更新情况。如果文件没有更改，则测试会通过；否则，测试将失败并显示差异。
结论
React Native 的开发需要添加足够的测试以确保应用程序质量。这篇文章介绍了如何使用 Jest 进行 React Native 的单元与集成测试。本文示例所涉及的主要功能包括设置 Jest、运行测试、Jest 的测试优势、自动化测试、mock API 和快照测试。尽管这个测试只是一个开始，在你进行更广泛测试时，你可以加上更多的测试用例来对你的应用程序进行评估，以确保其完整性和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674fd093fbd23cf890702824