Как проверить axios, получить функцию запроса в тестах шутка / фермента?

Question

У меня есть следующий компонент React, который отображается как дочерний в родительском компоненте, и передаются реквизиты:

<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

Вы пробовали издеваться над обещанием, как показано ниже:

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);
      });
});

Answer 2

Axios get метод возвращает обещание, поэтому вам, когда вы издеваетесь над этим методом, вам также нужно вернуть Promise

jest.fn(() => Promise.resolve({}))

Подробнее о Jest async насмешливый

Соответствующий ответ от SO