在 React Native 的开发过程中，我们常常需要进行单元测试来确保代码的稳定性和正确性。而 Jest 作为一个强大的测试框架，为我们提供了包括测试运行、断言、模拟、快照等一系列功能。在这篇文章里，我们将介绍如何在 React Native 中使用 Jest 进行单元测试的方法和步骤。
安装 Jest 和相关插件
首先，我们需要安装 Jest 和相关插件。在项目根目录下执行以下命令：
npm install --save-dev jest @types/jest react-test-renderer babel-jest
安装完毕后，我们需要在项目根目录下新建一个 __tests__ 目录。Jest 默认会扫描该目录下所有以 .test.js 或 .spec.js 结尾的文件。
编写第一个测试用例
我们来编写第一个测试用例，测试一下 sum 函数是否正常工作。首先，在 __tests__ 目录下创建一个新文件 sum.test.js，写入以下代码：
function sum(a, b) { return a + b; } test('adds 1 + 2 to equal 3', () => { expect(sum(1, 2)).toBe(3); });
在该代码中，我们定义了一个 sum 函数，然后使用 Jest 中的 test 函数来定义一个测试用例。在测试用例中，我们使用 Jest 中的 expect 函数和 toBe 方法来判断是否符合预期结果。
在终端中执行 npm test 命令，我们可以看到 Jest 运行了该测试用例，并输出了测试结果：
PASS __tests__/sum.test.js ✓ adds 1 + 2 to equal 3 (4ms)
从测试结果中可以看出，该测试用例运行通过了。
模拟 React Native 组件
在 React Native 中，我们常常需要测试组件的渲染和交互逻辑。为了做到这一点，我们需要先使用 React Native 常用的渲染组件工具 react-test-renderer 和新版的 @testing-library/react-native（详见后文）来模拟组件。下面我们创建一个包含按钮的组件，并编写测试用例测试该组件的渲染和交互逻辑。
首先，在项目根目录下创建一个名为 ButtonComponent.js 的组件，写入以下代码：
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ------ - ----------- ----- ---------------- - ---- --------------- ------ ------- -------- ----------------- ----- ------- -- - ----- ------- --------- - ------------ ----- ----------- - -- -- - -------------- - --- ------- -- ---------- -- ------ - ----------------- --------------------- ---------------------- ----- -------------------- ------ ------- ------- ------------------- -- - ----- ------ - ------------------- ------- - ---------------- ---------- ------------------ --- ---------------- -- ------------- -- -- ----- - ------ ------- --------- --- -- ---展开代码
在该组件中，我们使用了 useState 钩子来实现计数器的功能。并在 TouchableOpacity 组件上监听 handleClick 事件，在点击时更新计数器值，并执行 onPress 方法（如果传入了的话）。
然后，我们来编写测试用例，测试该组件是否正常工作。在 __tests__ 目录下创建一个新文件 ButtonComponent.test.js，写入以下代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- --------- - ---- -------------------------------- ------ --------------- ---- --------------------- ------------- --------- ---- ------ -- -- - ----- - --------- - - ----------------------- ----------- ---- ---- ----- ------------- - ---------------- --- ---- ------------------------------------ --- ---------------- ----- ---- ------ -- --------- -- -- - ----- ------- - ---------- ----- - --------- - - ----------------------- ----------- ---- ----------------- ---- -------------------------------- --- ----- ----------------------------------------- ----- ------------- - ---------------- --- ---- ------------------------------------ ---展开代码
在该代码中，我们使用 Jest 提供的 jest.fn() 方法来模拟 onPress 方法。然后，使用 render 方法渲染 ButtonComponent 组件，并使用 getByText 方法获取到按钮元素。接着，我们使用 fireEvent.press 方法模拟按钮点击事件，并验证是否触发 onPress 方法。最后，我们验证计数器是否正确地自增，并是否正确渲染到页面中。
在终端中执行 npm test 命令，我们可以看到 Jest 运行了该测试用例，并输出了测试结果：
PASS __tests__/ButtonComponent.test.js ✓ renders correctly with text (97ms) ✓ increments count when button is clicked (57ms)
从测试结果中可以看出，该测试用例运行通过了。
使用新版测试库 @testing-library/react-native
除了 react-test-renderer 之外，还有一个新的测试库 @testing-library/react-native，它提供了与 DOM 测试库 @testing-library/react 相似的 API，旨在更好地模拟和测试 React Native 组件。
在使用 @testing-library/react-native 时，我们需要先安装它，命令如下：
npm install --save-dev @testing-library/react-native
然后，我们可以使用 render、fireEvent 等方法来渲染和交互组件，具体用法与 @testing-library/react 类似。下面是使用 @testing-library/react-native 编写的 ButtonComponent 测试代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- --------- - ---- -------------------------------- ------ --------------- ---- --------------------- ----------- --------- ---- ------ -- -- - ----- - --------- - - ----------------------- ----------- ---- ---- ----- ------------- - ---------------- --- ---- ------------------------------------ --- -------------- ----- ---- ------ -- --------- -- -- - ----- ------- - ---------- ----- - --------- - - ----------------------- ----------- ---- ----------------- ---- -------------------------------- --- ----- ----------------------------------------- ----- ------------- - ---------------- --- ---- ------------------------------------ ---展开代码
从上面的代码可以看出，使用 @testing-library/react-native 可以让测试代码更加简洁和易读。
总结
本文介绍了在 React Native 中使用 Jest 进行单元测试的方法和步骤，以及如何使用 react-test-renderer 和 @testing-library/react-native 来模拟和测试组件。希望本文能够对你理解和掌握 React Native 的单元测试有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6485a53c48841e98944664bb
