使用 Jest 测试 React Native 组件

Jest 是 Facebook 开发的一款 JavaScript 测试框架，可以用于测试 React、React Native 等前端技术栈。在本文中，我们将介绍如何使用 Jest 测试 React Native 组件。

安装 Jest

首先，我们需要安装 Jest。在终端运行以下命令：

npm install --save-dev jest

配置 Jest

在项目根目录下创建一个 jest.config.js 文件，并添加以下内容：

// javascriptcn.com 代码示例
module.exports = {
  preset: 'react-native',
  moduleFileExtensions: ['js', 'jsx', 'json', 'ts', 'tsx'],
  transform: {
    '^.+\\.(js|jsx)$': require.resolve('babel-jest'),
    '^.+\\.tsx?$': 'ts-jest',
  },
  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$',
  testPathIgnorePatterns: [
    '\\\\node_modules\\\\',
    '<rootDir>/android/',
    '<rootDir>/ios/',
  ],
  collectCoverageFrom: ['**/*.{js,jsx,ts,tsx}', '!**/node_modules/**'],
};

这个配置文件告诉 Jest 在哪里寻找测试文件，以及如何运行测试。

编写测试用例

我们将编写一个简单的测试用例来测试一个 React Native 组件。在项目根目录下创建一个 __tests__ 文件夹，并在其中创建一个 example.test.js 文件。在该文件中添加以下内容：

// javascriptcn.com 代码示例
import React from 'react';
import { Text } from 'react-native';
import renderer from 'react-test-renderer';

import Example from '../Example';

describe('<Example />', () => {
  it('renders correctly', () => {
    const tree = renderer.create(<Example />).toJSON();
    expect(tree).toMatchSnapshot();
  });

  it('renders text correctly', () => {
    const tree = renderer.create(<Example />).toJSON();
    expect(tree.children[0]).toEqual('Hello, World!');
  });
});

该测试用例使用 Jest 的 describe 和 it 函数来定义测试套件和测试用例。其中，renderer 是一个将 React 组件渲染为 JSON 树的工具。我们使用 renderer.create 方法来创建一个 <Example /> 组件的 JSON 树，并使用 toMatchSnapshot 方法来比较输出结果是否与预期一致。另外，我们还使用 toEqual 方法来比较组件渲染后的第一个子元素是否为 Hello, World!。

运行测试

在终端中运行以下命令来运行测试：

npm test

Jest 将会自动运行所有测试用例，并输出测试结果。如果测试通过，Jest 会在项目根目录下创建一个 __snapshots__ 文件夹，并保存测试结果的快照。

总结

本文介绍了如何使用 Jest 测试 React Native 组件。我们首先安装了 Jest，并配置了测试环境。然后，我们编写了一个简单的测试用例来测试一个 React Native 组件。最后，我们使用 Jest 运行了测试，并查看了测试结果。希望本文能够帮助您更好地理解 Jest 测试框架，并提高 React Native 组件的测试质量。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65684370d2f5e1655d10b48f