React Native 是越来越受欢迎的移动端开发框架，而 Jest 是一个简单好用的 JavaScript 测试框架。在 React Native 中使用 Jest 进行测试是非常常见的做法，本文将详细介绍如何使用 Jest 进行 React Native 测试，包括配置、测试用例编写以及常用的测试技巧。
配置 Jest
首先，我们需要安装 Jest。在 React Native 项目中执行以下命令：
npm install jest --save-dev
安装完成后，我们需要配置 Jest。在根目录中新建一个 jest.config.js 文件，内容如下：
module.exports = {
clearMocks: true,
preset: 'react-native',
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
};配置说明：
clearMocks：每次运行测试前清除所有的 mock，避免测试数据污染。preset：使用 React Native 的测试预设。moduleFileExtensions：支持的文件类型。
编写测试用例
在编写测试用例之前，我们需要了解几个概念。
测试的作用
- 确保应用的各个部分在不同的条件下都能正常工作。
- 防止重构导致的错误，重构代码时如果测试全部通过则可以大胆将代码重构，不用担心产生新的错误。
- 方便新的开发人员快速了解应用的行为。
测试的分类
- 单元测试：测试单个功能模块。
- 集成测试：测试多个模块间的协作。
- 端到端测试：模拟完整的用户操作。
在 React Native 中，我们主要进行单元测试和集成测试。
测试驱动开发（TDD）
- 编写测试用例。
- 运行测试，测试失败。
- 编写代码，让测试通过。
- 重复上述过程。
TDD 可以帮助我们优化代码结构，避免不必要的代码。
Jest 的 API 简介
describe(name, fn)：定义测试模块。test(name, fn)：定义测试用例。expect(value)：生成一个期望值。toBe(value)：比较两个值是否相等。not.toBe(value)：比较两个值是否不相等。toBeTruthy()：判断值是否为真。toBeFalsy()：判断值是否为假。toBeGreaterThan(value)：判断值是否大于给定值。toBeGreaterThanOrEqual(value)：判断值是否大于或等于给定值。toBeLessThan(value)：判断值是否小于给定值。toBeLessThanOrEqual(value)：判断值是否小于或等于给定值。toMatch(regexp)：判断值是否匹配正则表达式。not.toMatch(regexp)：判断值是否不匹配正则表达式。toContain(item)：判断值中是否包含指定项。not.toContain(item)：判断值中是否不包含指定项。toThrow(error)：判断函数是否抛出指定错误。
接下来，我们通过一个例子来演示如何编写测试用例。假设我们有一个求和函数 sum，代码如下：
function sum(a, b) {
return a + b;
}我们需要编写测试用例来验证 sum 是否正确。
describe('sum', () => {
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
});解释一下上述代码：
describe定义了测试模块的名称。test定义了测试用例的名称和测试代码。
在 React Native 中，我们可以将测试文件命名为以 .test.js 或 .spec.js 结尾的文件，这样 Jest 就会自动识别并运行这些文件中的测试代码。
常用的测试技巧
Mock
在测试 React Native 应用时，我们有时需要模拟一些数据、函数或者组件，这时候可以使用 Jest 提供的 Mock 功能来模拟这些对象。
手动模拟对象
我们可以手动模拟对象的属性和方法，同时限定对象的返回值和函数的调用次数。
const fn = jest.fn(() => 'hello');
fn.mockReturnValueOnce('world');
expect(fn()).toBe('world');
expect(fn()).toBe('hello');
expect(fn).toHaveBeenCalledTimes(2);jest.fn()：创建一个 Mock 函数。fn.mockReturnValueOnce(value)：定义 Mock 函数返回值。expect(fn()).toBe(value)：断言 Mock 函数调用的结果。expect(fn).toHaveBeenCalledTimes(count)：断言 Mock 函数被调用的次数。
手动模拟组件
我们可以手动模拟组件，包括它的属性和状态，然后去测试组件的渲染结果。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- --------------------------------
----- ------------- - -- ---- -- -- -
----- ----- ------- - ------------------
----- ----------- - -- -- ---------- - ---
------ -
------
-------------------
------------------
------- ------------ --- --------------------- --
-------
--
--
---------- ----------- -- -- -
----- - --------- - - --------------------- ----------- ----
---------------------------------------
------------------------------------
---render()：渲染组件。getByText(text)：根据文本内容选取组件。expect(getByText('test')).toBeTruthy()：断言组件是否存在。
手动模拟库
我们可以手动模拟库，模拟库的行为，然后测试自己的代码是否符合预期。
-- -------------------- ---- ------- ------ ----- ---- -------- ------------------- ---------- ------- ----- -- -- - --------------------------------- ----- ------- --- ----- ------ - ----- ------------ ---------------------------------- ---
jest.mock('axios')：模拟库。axios.get.mockResolvedValueOnce(value)：定义库的返回值。await axios.get()：调用库的方法。
Snapshot
Snapshot 是 Jest 提供的一种机制，可以将组件渲染出的结果保存成文件，然后在每次测试时与之前的快照进行比对，以此来验证组件的渲染是否正确。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ---------------------- ----- ------------- - -- -- - ----- -------- ------ ---- ------- ---- ---------------- --------- -- -- -- ---------- ---------- -- -- - ----- ---- - ------------------------------ ------------- ------------------------------- ---
renderer.create(<TestComponent />).toJSON()：创建快照。expect(tree).toMatchSnapshot()：将组件渲染结果与已有快照进行比对。
常用的测试库
- redux-saga-test-plan: 测试 Redux-Saga。
- react-testing-library: 测试 React 组件。
- enzyme: 测试 React 组件。
- jest-fetch-mock: 测试网络请求。
总结
本文介绍了如何在 React Native 中使用 Jest 进行单元测试和集成测试，并说明了常用的测试技巧。Jest 具有易用、灵活、强大的特点，React Native 中使用 Jest 进行测试非常方便。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f005faf6b2d6eab39f57bf