前言
在前端开发中，单元测试是不可或缺的环节。而React Native作为移动端开发框架也需要进行单元测试来保证代码质量。本文主要介绍如何使用npm包 @testing-library/react-native进行React Native的单元测试，包括安装、配置以及具体使用方法。
安装与配置
npm i -D @testing-library/react-native
安装完毕后，在项目的根目录下创建一个jest.config.js文件，并添加以下配置
module.exports = {
preset: "react-native",
setupFilesAfterEnv: ["@testing-library/jest-native/extend-expect"],
transformIgnorePatterns: [
"node_modules/(?!(jest-)?react-native|@react-native|@testing-library|react-navigation)",
],
};配置完成后，即可在项目中使用 @testing-library/react-native 进行单元测试。
使用说明
假设需要对一个名为Example的组件进行测试。首先，在__tests__目录下创建Example.test.js文件，并编写以下测试代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- --------------------------------
------ ------- ---- ----------------------------
----------------- ----------- -- -- -
---------- ------ --- ----------- -- -- -
----- ----------- - --------------- ----
----- ------- - ---------------- ---------
------------------------------
---
---该代码使用了jest本身内置的测试语法describe和it，其中describe用于指明测试内容，it用于编写具体测试用例。在该测试用例中，我们通过render函数渲染出Example组件，随后利用getByText函数获取到渲染后的元素，最后使用expect断言获取到的元素是否存在。
在Example.test.js文件中的代码编写完成后，运行以下命令：
npm test
即可在终端中看到测试结果。
深入学习
- 使用fireEvent进行事件触发
@testing-library/react-native 还提供了fireEvent方法，可以用于模拟用户的行为操作，比如点击、滑动等等。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---------- ---- --------------------------------
------ ------- ---- ----------------------------
----------------- ----------- -- -- -
---------- ------ --- ----------- -- -- -
----- ----------- - --------------- ----
----- ------ - ---------------- ------
------------------------
----- ------ - ---------------------
-----------------------------
---
---在该测试用例中，我们通过getByText函数获取到渲染后的按钮元素，随后使用fireEvent模拟了一次点击事件。最后我们使用expect断言，判断是否出现了'Clicked'的文本内容。
- 使用waitFor方法
有些操作需要等待一段时间后才会完成，例如加载数据、异步操作等等。这时，可以使用 @testing-library/react-native 提供的waitFor方法，来等待操作完成后再进行断言。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- -------- ---- --------------------------------
------ ------- ---- ----------------------------
----------------- ----------- -- -- -
---------- ------ --- ----------- ----- -- -- -
----- ----------- - --------------- ----
----- ------- - ------------------------
------------------------------
----- ---------- -- ----------------------- -------------------------
---
---在该测试用例中，我们通过getByText函数获取到渲染后的Loading提示元素，随后使用expect断言Loading提示元素存在。接着，我们使用waitFor方法等待‘Hello World!’文本元素的加载，等待完成后，再使用expect判断是否成功加载了‘Hello World!’文本元素。
结语
通过本文的介绍，相信大家已经初步了解了怎样使用 @testing-library/react-native 进行React Native的单元测试了。希望有更多的开发者可以关注单元测试，让我们的项目更加健康、可维护。
示例代码
项目地址: https://github.com/HmyBmny/testing-library-react-native-example
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/168247