Enzyme 测试 React 组件时如何模拟 fetch 请求-JavaScript中文网-JavaScript教程资源分享门户

Enzyme 测试 React 组件时如何模拟 fetch 请求

在开发 React 组件时，我们经常需要模拟 API 请求来测试组件的行为。Enzyme 是一个常用的测试工具，它可以帮助我们测试 React 组件。但是，由于 fetch 请求是异步的，我们需要使用一些技巧来模拟 fetch 请求。

在本文中，我们将介绍如何使用 Enzyme 模拟 fetch 请求。我们将从以下几个方面来讲解：

使用 fetch-mock 模拟 fetch 请求
在测试中使用 fetch-mock
示例代码
使用 fetch-mock 模拟 fetch 请求

fetch-mock 是一个用于模拟 fetch 请求的库，它可以帮助我们在测试中模拟 API 请求。我们可以使用 fetch-mock 来模拟一个简单的 API 请求，如下所示：

import fetchMock from 'fetch-mock';

fetchMock.get('/api/data', {
  data: 'hello world'
});

在这个示例中，我们使用 fetchMock.get() 方法来模拟一个 GET 请求，该请求的 URL 是 '/api/data'，返回的数据是一个包含 'hello world' 的对象。

在测试中使用 fetch-mock

在测试中，我们可以使用 fetch-mock 来模拟 fetch 请求。我们可以使用 jest.fn() 方法来模拟 fetch 方法，如下所示：

// javascriptcn.com 代码示例
import fetchMock from 'fetch-mock';

const mockResponse = (status, statusText, response) => {
  return new Response(response, {
    status: status,
    statusText: statusText,
    headers: {
      'Content-type': 'application/json'
    }
  });
};

global.fetch = jest.fn().mockImplementation((url, options) => {
  const { method } = options;
  if (method === 'GET') {
    return Promise.resolve(mockResponse(200, null, { data: 'hello world' }));
  }
});

在这个示例中，我们使用 jest.fn() 方法来模拟 fetch 方法。我们首先定义了一个 mockResponse() 方法，该方法返回一个模拟的 Response 对象。然后，我们使用 global.fetch 来模拟 fetch 方法，该方法返回一个 Promise 对象，该 Promise 对象会在 resolve() 方法中返回我们模拟的 Response 对象。

示例代码

下面是一个使用 Enzyme 和 fetch-mock 模拟 fetch 请求的示例代码：

// javascriptcn.com 代码示例
import React from 'react';
import { shallow } from 'enzyme';
import fetchMock from 'fetch-mock';

import MyComponent from './MyComponent';

describe('MyComponent', () => {
  afterEach(() => {
    fetchMock.reset();
  });

  it('should render "hello world" when fetch is successful', () => {
    fetchMock.get('/api/data', {
      data: 'hello world'
    });

    const wrapper = shallow(<MyComponent />);

    return wrapper.instance().componentDidMount().then(() => {
      expect(wrapper.text()).toEqual('hello world');
    });
  });

  it('should render "error" when fetch fails', () => {
    fetchMock.get('/api/data', 500);

    const wrapper = shallow(<MyComponent />);

    return wrapper.instance().componentDidMount().then(() => {
      expect(wrapper.text()).toEqual('error');
    });
  });
});

在这个示例中，我们定义了两个测试用例。第一个测试用例测试当 fetch 成功时组件是否正确渲染。我们首先使用 fetchMock.get() 方法来模拟一个 GET 请求，然后使用 shallow() 方法来创建一个 MyComponent 实例。接着，我们调用 componentDidMount() 方法来触发组件的生命周期方法，并在 Promise 的 then() 方法中进行断言。

第二个测试用例测试当 fetch 失败时组件是否正确渲染。我们使用 fetchMock.get() 方法来模拟一个返回 500 错误的 GET 请求，并在 Promise 的 then() 方法中进行断言。

总结

在本文中，我们介绍了如何使用 Enzyme 和 fetch-mock 模拟 fetch 请求来测试 React 组件。我们首先介绍了 fetch-mock 的基本用法，然后讲解了如何在测试中使用 fetch-mock。最后，我们给出了一个示例代码，演示了如何使用 Enzyme 和 fetch-mock 模拟 fetch 请求来测试 React 组件。

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