详解如何在项目中使用jest测试react native组件

Jest测试框架概述

当前JavaScript生态中存在多种测试工具，但针对React应用的测试策略，Facebook官方推荐的标配测试框架是Jest。Jest的官方网站为https://facebook.github.io/jest/。根据官网描述，Jest旨在提供“无痛的JavaScript测试”体验，它是Facebook用于测试服务及React应用程序的JavaScript单元测试框架。

单元测试主要针对代码中的最小可测试单元，通常指函数、类或单个组件，不涉及系统级或集成级的测试。作为软件测试的基础环节，Jest具备以下核心特点：

1. 高适应性：Jest采用模块化设计，具备高度的可扩展性和配置灵活性。
2. 沙箱机制与高性能：Jest通过虚拟化JavaScript运行环境来模拟浏览器行为，并支持并行执行测试任务，从而提升测试速度。
3. 快照测试：Jest能够对React组件树进行序列化快照，快速生成测试用例，从而优化用户体验的迭代效率。
4. 异步代码支持：框架原生支持Promise以及async/await语法的测试。
5. 自动生成静态分析结果：除了展示测试用例的执行结果外，Jest还能自动生成语句、分支及函数的覆盖率报告。

使用单元测试工具的必要性

为何需要引入单元测试工具？

在开发过程中，即使不使用专用测试工具，开发者也可以手动编写代码进行单元测试。然而，由于代码模块间存在相互调用关系，测试时往往希望被测单元保持相对独立且能正常运行。这就要求对被测函数的依赖项和环境进行Mock处理。此外，在测试数据输入、执行过程及结果验证等环节存在大量重复性工作，而测试工具正是为了解决这些痛点，提供便利支持。

React Native项目配置Jest

准备工作阶段

你需要拥有一个React Native项目。本文演示使用的示例项目名为ReactNative-ReduxSaga-TODO。

安装Jest

如果你是通过react-native init命令行创建的React Native项目，且版本号在0.38以上，通常无需额外安装。若不确定，请检查

package.json文件中是否已包含以下配置代码：

 // package.json
 "scripts": {
  "test": "jest"
 },
 "jest": {
  "preset": "react-native"
 }

若未包含，请执行npm i jest --save-dev进行安装，并将上述配置代码添加到package.json文件的对应位置中。

完成上述步骤后，简单运行npm run test以验证Jest配置是否成功。由于此时尚未编写任何测试用例，终端会打印“no tests found”提示，这即表示配置已完成。

快照测试实战与更新

快照测试实战

首先编写一个组件

import React from 'react';
import {
 Text, View,
} from 'react-native';

import PropTypes from 'prop-types';

const PostArea = ({ title, text, color }) => (
 <View style={{ backgroundColor: '#ddd', height: 100 }}>
  <Text style={{ fontSize: 30 }}>{title}</Text>
  <Text style={{ fontSize: 15, color }}>{text}</Text>
 </View>
);

export default PostArea;

在项目根目录下找到__tests__文件夹。接下来，我们将使用React的测试渲染器结合Jest的快照功能与组件交互，捕获渲染输出并生成快照文件。

// PostArea_test.js
import 'react-native';
import React from 'react';
import PostArea from '../js/Twitter/PostArea';

import renderer from 'react-test-renderer';

test('renders correctly', () => {
 const tree = renderer.create(<PostArea title="title" text="text" color="red" />).toJSON();
 expect(tree).toMatchSnapshot();
});

随后在终端运行npm run test或jest命令，终端将输出如下结果：

PASS __tests__\PostArea_test.js (6.657s) √ renders correctly (5553ms)

› 1 snapshot written. Snapshot Summary › 1 snapshot written in 1 test suite.

Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 1 added, 1 total Time: 8.198s Ran all test suites.

同时，在test文件夹下会生成一个对应的快照文件。

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders correctly 1`] = `
<View
 style={
  Object {
   "backgroundColor": "#ddd",
   "height": 100,
  }
 }
>
 <Text
  accessible={true}
  allowFontScaling={true}
  disabled={false}
  ellipsizeMode="tail"
  style={
   Object {
    "fontSize": 30,
   }
  }
 >
  title
 </Text>
 <Text
  accessible={true}
  allowFontScaling={true}
  disabled={false}
  ellipsizeMode="tail"
  style={
   Object {
    "color": "red",
    "fontSize": 15,
   }
  }
 >
  text
 </Text>
</View>
`;

修改源文件后的处理

在后续运行测试时，新的渲染输出将与之前创建的快照进行对比。快照文件应与源代码一同提交至版本控制。当快照测试失败时，需检查是否发生了有意或无意的代码变更。如果变更符合预期，可调用jest -u命令来覆盖当前快照。

我们对原有代码进行修改：将第二行<Text>组件的字号属性改为14。

<Text style={{ fontSize: 14, color }}>{text}</Text>

此时再次运行jest，终端将抛出错误信息，并明确指出错误发生的位置。

鉴于此次代码修改是有意为之，此时运行jest -u命令即可覆盖更新快照。再次执行jest命令，测试将不再报错。

以上即为本文的全部内容，希望对各位的学习有所帮助，也欢迎大家多多支持本站。