前言：
随着 React Native 技术的不断发展，越来越多的移动端开发者选择使用 React Native 来进行跨平台开发。
在开发过程中，针对文件、组件、函数的测试至关重要。可以有效避免出现问题，并且可以提高代码的质量。本文将会讲解如何使用 Jest 进行单元测试来进行 React Native 项目的开发，希望这篇文章对大家有所帮助。
什么是单元测试
单元测试是指对程序的最小可测试单元进行检查和验证，常常是指对一个函数、一个类或者一个模块进行测试。
单元测试有以下优点：
- 避免因代码变动导致的不稳定和错误；
- 能及早地发现和定位问题，保证代码质量；
- 学习曲线低，不需要学习庞大的测试框架或深入研究 Selenium 等工具；
在本文中，我们将使用 Jest 进行 React Native 项目单元测试。
Jest 简介
Jest 是 Facebook 的一个开源 JavaScript 测试基础库，由于它的 API 易于使用，易于阅读且功能强大， Jest 很受欢迎，被许多顶级公司采用。
Jest 有以下特点：
- 易于配置，对新手友好，使用文档详尽;
- 并行测试，测试速度快;
- 实时监视，代码保存后即可自动测试;
- 能够运行 Babel 和 TypeScript，可使用 ES6+
- 能够测试 后端Node.js代码和 React Native代码。
安装 Jest
Jest 需要依赖于 Node.js 安装，请确保已经安装。
安装 Jest 很简单，只需要在项目的控制台中运行以下命令即可：
--- ------- ---- ----------
一般情况下，Jest 就会被安装在项目的 ./node_modules/.bin/jest 目录中。当安装完成之后，我们可以创建一个 __tests__ 目录，用于存放我们的测试文件。
Jest 配置
Jest 可以通过配置文件进行自定义配置，让您的测试更加灵活。
如果您的项目是使用 Create React Native App 创建的，那么 Jest 的配置就已经创建好了，您可以找到文件夹 __tests__/jest/config.js 和 __tests__/jest/preprocessor.js，并将 setupFiles 属性添加到 package.json 文件中，如下所示：
-
------- ----------------------------
---------- -
------- ------
--
------- -
--------- ---------------
-------------- -
------------------------
--
------------- -
----------------------------------------------------------
--
-------------------------- -
-------------------------------------------------------------------------------------------------------------------------------------------
-
-
-如果您的项目中没有配置，请参考以下代码：
-- --------------
-------------- - -
------- ---------------
--------------------- ------ ------ ----- ------ ------- --------
----------------- -
----------- -------------------
--
---------- -
-------------- ----------
--
---------- ----------------------------------
------------------ -----------------
-------- -
---------- -
--------- ----------------
--
--
--在以上配置文件中，我们添加了一些重要的属性，用于配置 Jest：
- preset： Jest 的预设值。如果我们正在测试 React Native 代码，则预设为
react-native。 - moduleFileExtensions: Jest 可以识别创建的
.jsx和.ts(x)文件。 - transform: 用于指定 Jest 如何将需要测试的代码转换为可执行的 JavaScript。
- testMatch：用于定义测试用例的位置，此处在
__tests__文件夹中寻找符合**/*.test.ts(x)的文件进行测试。 - globals：用于配置全局变量，此处定义了 Typescript 的编译器。
Jest 命令行测试
我们编写了测试用例，并配置了 Jest 的配置文件，通过执行以下命令即可启动测试：
--- ----
执行后，Jest 将进入监视模式，将会自动检测我们对源码及测试代码的任何更改，重新运行测试。
示例代码
下面我们来举一个测试例子：
创建一个名为 NumberService.tsx 的文件，用于提供一个加法服务：
------ -------- ------ ------- -- -------- ------ - ------ - - -- -
然后添加一个 NumberService.test.tsx 文件，用于测试上面的加法服务：
------ - --- - ---- ------------------
--------------- ---------- -- -- -
---------- ------ --- --- -- --- -------- --------- -- -- -
------------- ------------
---
---------- ------ --- --- -- --- -------- --------- -- -- -
-------------- --------------
---
---------- ------ - --- --- ---- -- -- -
------------- ------------
---
--- 在代码中，我们使用 describe() 方法来创建一个测试用例套件。使用 it() 方法来创建测试用例。
对于每个测试用例，我们使用 Jest 的匹配器 expect() 和 toBe() 来验证实际结果是否符合我们的期望值。
最后，在控制台中输入 npx jest 运行我们的测试，结果应该如下：
---- --------------------------------
----- --------
- ------ ------ --- --- -- --- -------- ------- -----
- ------ ------ --- --- -- --- -------- ------- -----
- ------ ------ - --- --- -- -----恭喜！您已经成功地编写了一个 React Native 应用程序单元测试用例。
结论
单元测试是开发 React Native 应用程序的重要组成部分，使用 Jest 进行单元测试可以使开发人员更容易地编写测试用例，以提高代码质量、防止问题出现。在本文中，我们向大家介绍了 Jest 实践，测试用例的匹配器，并通过一个示例向大家展示了 Jest 的基本使用。
希望这篇文章能对您有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/67063857d91dce0dc85a1764