React Native 项目单元测试:使用 Jest 进行测试

阅读时长 6 分钟读完

前言:

随着 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

纠错
反馈