Enzyme 测试 React 组件时如何模拟 GET 和 POST 请求

Enzyme 是 React 组件测试中常用的工具，但在测试组件时，我们经常需要模拟一些网络请求，比如 GET 和 POST 请求。本文将介绍 Enzyme 如何模拟这些请求，并提供详细的指导和示例代码。

1. 模拟 GET 请求

在测试 React 组件时，我们经常需要模拟一些 GET 请求，以获取组件需要的数据。下面是一个简单的示例：

// javascriptcn.com 代码示例
import { mount } from 'enzyme';
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  let mock;

  beforeEach(() => {
    mock = new MockAdapter(axios);
    mock.onGet('/api/data').reply(200, { data: 'Hello, World!' });
  });

  afterEach(() => {
    mock.restore();
  });

  it('should render data from GET request', async () => {
    const wrapper = mount(<MyComponent />);
    await wrapper.instance().componentDidMount();
    wrapper.update();
    expect(wrapper.find('div').text()).toEqual('Hello, World!');
  });
});

在这个示例中，我们使用了 axios-mock-adapter 来模拟一个 GET 请求，并在 beforeEach 中设置了请求的 URL 和响应数据。在测试用例中，我们使用 mount 方法来渲染 MyComponent 组件，并在 componentDidMount 生命周期中发起了 GET 请求。最后，我们使用 expect 断言来检查组件是否正确渲染了响应数据。

1. 模拟 POST 请求

除了 GET 请求，我们还经常需要模拟一些 POST 请求，以测试组件的提交行为。下面是一个简单的示例：

// javascriptcn.com 代码示例
import { mount } from 'enzyme';
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  let mock;

  beforeEach(() => {
    mock = new MockAdapter(axios);
    mock.onPost('/api/data').reply(200, { success: true });
  });

  afterEach(() => {
    mock.restore();
  });

  it('should submit data via POST request', async () => {
    const wrapper = mount(<MyComponent />);
    wrapper.setState({ value: 'Hello, World!' });
    await wrapper.find('form').simulate('submit');
    expect(mock.history.post.length).toBe(1);
    expect(mock.history.post[0].data).toBe('value=Hello%2C%20World%21');
  });
});

在这个示例中，我们同样使用了 axios-mock-adapter 来模拟一个 POST 请求，并在 beforeEach 中设置了请求的 URL 和响应数据。在测试用例中，我们使用 mount 方法来渲染 MyComponent 组件，并在组件状态中设置了一个 value 属性。然后，我们使用 simulate 方法模拟了表单提交事件，并使用 expect 断言来检查请求是否正确发送以及发送的数据是否正确。

1. 总结

Enzyme 是一个非常实用的 React 组件测试工具，在测试组件时，我们经常需要模拟一些网络请求，比如 GET 和 POST 请求。本文介绍了如何使用 axios-mock-adapter 来模拟这些请求，并提供了详细的指导和示例代码。希望本文能对你在测试 React 组件时有所帮助。

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