Jest 在 React Native 上的应用入门

阅读时长 4 分钟读完

概述

Jest 是一个由 Facebook 开发的 JavaScript 测试框架,它结合了一个优秀的断言库(expect)、mock 对象功能和单元测试。Jest 可以在 React Native 应用中进行测试。本文将介绍 Jest 如何在 React Native 中进行应用,同时提供详细的使用指南和示例代码。

安装 Jest

在 React Native 应用中使用 Jest 需要先进行安装。使用 npm 包管理工具进行安装,执行以下命令:

这个命令将 Jest 安装到 devDependencies 中,这就意味着 Jest 可以在开发的时候使用。同时,还需要安装 babel-jest,这是 Jest 编译 ES6 的插件,导入执行以下命令进行安装:

编写 Jest 测试

Jest 的测试文件以 .test.js 或 .spec.js 结尾。如:example.test.js。

-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- --------------------------------
------ ------- ---- -------------

------------- ----------- -- -- -
  ----- - --------- - - --------------- ----
  ----- ------- - ------------------ ------------
  ------------------------------
---

这是一个通过 jest 测试 Example 组件是否正常渲染的例子。首先引入 React、render 方法和被测试的组件 Example。然后编写 test 函数,传入参数为名为 “renders correctly” 的字符串,字符串用于辅助测试的描述。test 函数中渲染 Example 组件并在其内部通过 getByText 方法找到 Example 组件中包含 ‘Example Component’ 文字的元素。最后用 expect 方法检查查找到的元素是否被定义。如果测试通过,expect 方法不会输出任何东西,如果测试失败,expect 方法会抛出错误。

运行 Jest 测试

在项目根目录运行以下命令即可启动 Jest 测试:

测试 React Native 应用中的异步请求

在 React Native 应用中异步请求是相当常见的操作。如何测试一个带有异步请求的组件呢?这里介绍一种方案:使用 Jest 提供的 mock API 进行 mock。

-- -------------------- ---- -------
-------------- --- ------- ---- ----- ------- ----- -- -- -
  ---------------------
  ----- - --------- - - -------------------- ----
  ----------------------------------------------
  --------------------
  ----- ---------- -- -
    ----- ------- - ------------------ -------
    ------------------------------
  ---
---

在这个例子中,首先使用 jest.useFakeTimers() 返回 mock 函数。接下来渲染 AsyncExample 组件,然后判断是否显示 “Loading...” 文字。接下来运行所有的 timers 以执行组件中的所有 setTimeout。waitFor 方法等待 “Example Text” 渲染完成,如果测试通过,then 方法会执行;如果测试失败,则会 throw 错误。

结尾

通过本文介绍的内容,读者已经可以初步掌握 Jest 在 React Native 应用中的应用情况,并且能够编写并运行 Jest 测试,如有需要可以查看 Jest 官方文档进行深入学习。

示例代码

完整示例代码可以参考以下链接:https://github.com/wangjianhui1010/jest-react-native-example

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67974bd2504e4ea9bde62f46

纠错
反馈