javascript - 如何在 jest/enzyme 测试中测试 axios get 请求函数？

Question

我有跟随 React 组件，它在父组件中作为子组件呈现并传递 props:

<Component 
    localStorageValue={'test-walue'} 
    requestDataFunc={getData}
    requestUserData={getUserData} 
    expectedResponseKey={'key'} 
    dataType={'test}
    activePage={'index'} 
    saveData={this.setData} 
/>

所以 requestDataFunc 是一个传递给组件并在 componentDidMount 中运行的函数:

componentDidMount() {
  requestDataFunc().then(({ data }) => {
      const { selectedDataItems } = this.state;
      const expectedResponseData = data[expectedResponseKey];
      let interimDataArr = [];
      expectedResponseData.forEach((item) => {
        interimDataArr = [...interimDataArr, {
          ...item,
          active: selectedDataItems.length ? selectedDataItems.some((selectedItemId) => selectedItemId === item.id) : false,
        }];
      });
}

但是当我运行测试时，我得到:

TypeError: 无法读取未定义的属性 'then'

requestDataFunc().then(({ data }) => {
    const { selectedDataItems } = this.state;
    const expectedResponseData = data[expectedResponseKey];
    let interimDataArr = [];

我刚开始测试渲染组件:

describe('correct component render', () => {
  const defaultProps = {
    localStorageValue: 'test-walue',
    requestDataFunc: jest.fn(),
    requestUserData: jest.fn(),
    expectedResponseKey: 'key',
    dataType: 'test',
    activePage: 'index',
    saveData: jest.fn(),
  };

  const wrapper = shallow(<ComponentName { ...defaultProps } />);

  test("render component", () => {
    expect(wrapper.length).toEqual(1);
  });


});

我想我需要以某种方式模拟该请求应该接收的请求和数据。如何正确执行此操作？

Answer 1

你试过如下模拟promise吗:

var mockPromise = new Promise((resolve, reject) => {
    resolve(<mock response similar to actual promise response>);
});
describe('correct component render', () => {
      const defaultProps = {
        localStorageValue: 'test-walue',
        requestDataFunc: jest.fn().mockReturnValueOnce(mockPromise),
        requestUserData: jest.fn(),
        expectedResponseKey: 'key',
        dataType: 'test',
        activePage: 'index',
        saveData: jest.fn(),
      };

      const wrapper = shallow(<ComponentName { ...defaultProps } />);

      test("render component", () => {
        expect(wrapper.length).toEqual(1);
      });
});