使用 Jest 运行 React Native 测试时如何解决 “network error on fetch” 问题？

在使用 Jest 运行 React Native 测试时，有时会遇到 “network error on fetch” 的问题。这个问题通常是由于测试代码中的网络请求导致的，而 Jest 默认并不支持网络请求。那么该如何解决这个问题呢？

问题原因

在 React Native 中，我们通常使用 fetch API 发起网络请求。而在 Jest 中，默认不支持网络请求，因此当我们在测试代码中使用 fetch API 时，会出现 “network error on fetch” 的错误。

解决方案

为了解决 “network error on fetch” 的问题，我们需要在 Jest 中模拟网络请求。这可以通过 Jest 提供的 jest.mock 方法来实现。

具体步骤如下：

1. 创建一个名为 __mocks__ 的文件夹，用于存放模拟请求的代码。
2. 在 __mocks__ 文件夹中创建一个名为 fetch.js 的文件，并在其中编写模拟请求的代码。例如：

const fetchMock = jest.fn(() => Promise.resolve({ json: () => ({ key: 'value' }) }));
global.fetch = fetchMock;

这段代码会模拟一个返回 { key: 'value' } 的网络请求，并将其挂载到全局对象 global 上。

1. 在测试代码中，使用 jest.mock 方法来引入 fetch.js 文件。例如：

jest.mock('../__mocks__/fetch');

这样，当测试代码中使用 fetch API 时，Jest 会自动调用 fetch.js 中定义的模拟请求。

示例代码

下面是一个简单的测试代码示例，用于测试一个返回数据的组件：

// javascriptcn.com 代码示例
import React from 'react';
import { View, Text } from 'react-native';
import { render } from '@testing-library/react-native';

const fetchData = async () => {
  const response = await fetch('https://example.com/data');
  const data = await response.json();
  return data;
};

const MyComponent = () => {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetchData().then(setData);
  }, []);

  return (
    <View>
      {data ? (
        <Text>{data.key}</Text>
      ) : (
        <Text>Loading...</Text>
      )}
    </View>
  );
};

// 引入模拟请求
jest.mock('../__mocks__/fetch');

describe('MyComponent', () => {
  it('renders data correctly', async () => {
    const { getByText } = render(<MyComponent />);
    expect(getByText('Loading...')).toBeDefined();
    await waitFor(() => expect(getByText('value')).toBeDefined());
  });
});

在上面的示例代码中，我们使用了 fetchData 函数来发起网络请求，并在组件中使用了 useEffect 来获取数据并更新组件状态。在测试代码中，我们使用了 jest.mock 来引入模拟请求，并使用 render 方法来渲染组件并检查渲染结果。

总结

在使用 Jest 运行 React Native 测试时，我们可能会遇到 “network error on fetch” 的问题。这个问题通常是由于测试代码中的网络请求导致的，而 Jest 默认并不支持网络请求。为了解决这个问题，我们可以使用 jest.mock 方法来模拟网络请求，并将其挂载到全局对象 global 上。通过这种方式，我们可以在测试代码中使用 fetch API，并成功运行测试。

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