Enzyme 和 Jest 在 React Native 应用中的完整应用教程

Enzyme 和 Jest 在 React Native 应用中的完整应用教程

React Native 是一种流行的跨平台移动应用开发框架。但是，React Native 应用的测试不同于 Web 应用。这篇文章将通过介绍 React Native 应用中的 Enzyme 和 Jest 的完整应用来帮助读者更好地理解和掌握 React Native 应用的测试。

Jest 简介

Jest 是 Facebook 推出的一套 JavaScript 测试框架，可以非常方便地实现各种测试，包括通过 mock 数据进行接口测试（fetch、XHR、WebSocket 等），或者针对特定的函数或组件进行测试。对于 React Native 应用的测试，Jest 显然是个不错的选择。

Enzyme 简介

Enzyme 是在 Jest 的基础上，为 React 组件提供的测试工具库。Enzyme 能够在浏览器的虚拟 DOM 中运行测试，更方便调试并提高测试覆盖率。同时，Enzyme 也支持 React Native 应用的测试。

在 React Native 应用中使用 Jest 和 Enzyme 进行测试

首先，在 React Native 应用中使用 Jest 和 Enzyme 进行测试，需要在项目根目录下新建一个名为 jest.config.js 的配置文件，具体配置如下：

module.exports = {
  preset: 'react-native',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  transform: {
    "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js",
    "^.+\\.tsx?$": "ts-jest"
  },
  testRegex: "(/__tests__/.*|(\\.|/)test)\\.(jsx?|tsx?)$",
  testPathIgnorePatterns: ["/node_modules/", "/tests/"],
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  globals: {
    'ts-jest': {
      babelConfig: true,
    },
  },
};

这里的配置涉及了一些细节配置，其中 setupFilesAfterEnv 指定 Jest 在测试运行之前需要执行的代码，可以引入 Enzyme 和其他一些必要的配置。我们把 jest.setup.js 文件放在项目根目录下，并进行以下配置：

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

这里的代码主要目的是用 Enzyme 进行测试初始化，需要安装两个库 enzyme 和 enzyme-adapter-react-16。

除此之外，我们还需要安装 Jest 和相关的依赖库：

npm install -D jest jest-junit ts-jest @types/jest react-test-renderer enzyme @types/enzyme enzyme-adapter-react-16 @babel/core @babel/preset-env @babel/preset-react

在进行完上述操作之后，在 React Native 应用中就可以开始使用 Jest 和 Enzyme 进行测试。

如何进行组件测试

在应用中，我们经常需要对组件进行测试，下面是一个简单的示例：

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

interface Props {}

export default class Welcome extends React.Component<Props> {
  render() {
    return (
      <View>
        <Text>Welcome!</Text>
      </View>
    );
  }
}

这个组件比较简单，只是简单地渲染了一个 View 和一个 Text 组件，以下是测试代码：

import React from 'react';
import { shallow } from 'enzyme';

import Welcome from '../Welcome';

describe('Welcome', () => {
  it('renders correctly', () => {
    const wrapper = shallow(<Welcome />);
    expect(wrapper).toMatchSnapshot();
  });

  it('renders the welcome message', () => {
    const wrapper = shallow(<Welcome />);
    expect(wrapper.find('Text').children().text()).toContain('Welcome!');
  });
});

这里我们引入了 shallow 方法。它会用 ReactTestRenderer 将组件渲染出来，开销较小，不能进行子组件渲染。通过 find 方法来查找我们需要的 Text 组件，并对它的子元素进行断言测试。

如何进行 API 测试

React Native 应用通常需要连接 API 来获取后台数据，因此针对 API 的测试也是必不可少的。我们来看一个示例：

async function fetchUsers() {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  return await response.json();
}

这个函数会获取从一个网站获取用户信息列表，我们需要对这个函数进行测试。

import fetchMock from 'jest-fetch-mock';

import { fetchUsers } from '../api';

// using Jest's mock function
const mockCallback = jest.fn();

describe('fetchUsers', () => {
  beforeEach(() => {
    fetchMock.resetMocks();
  });

  it('returns user list', async () => {
    const expectedData = [
      { name: 'user1', email: 'user1@gmail.com' },
      { name: 'user2', email: 'user2@gmail.com' },
    ];
    fetchMock.mockResponseOnce(JSON.stringify(expectedData));
    await fetchUsers(mockCallback);
    expect(mockCallback).toHaveBeenCalledWith(expectedData);
  });

  it('throws an error', async () => {
    fetchMock.mockReject(new Error('something went wrong'));
    await fetchUsers(mockCallback);
    expect(mockCallback).toHaveBeenCalledWith('something went wrong');
  });
});

这里使用了 Jest 的 mock 方法来模拟 API。我们使用了 jest-fetch-mock 库来模拟 fetch 的行为，这样可以在测试中捕获 API 中的任何错误。

总结

本文介绍了在 React Native 应用中使用 Jest 和 Enzyme 进行测试的完整流程，从配置启动到实现组件测试和 API 测试等。同时我们也给出了代码示例。使用 Jest 和 Enzyme 可以使得 React Native 应用的测试变得更加简单和方便。相信读者在阅读本文之后可以更好地了解和使用 Jest 和 Enzyme 进行 React Native 应用的测试。

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