Как проверить вызовы методов после асинхронного вызова в тестах React / Redux / Jest

Question

У моего компонента есть кнопка, которая вызывает метод handleSave. Я упростил код, чтобы сделать его более актуальным.

Этот метод компонента выглядит следующим образом:

handleSave = async () => {
  const response = await this.props.dispatchSave();
  this.props.dispatchNotification();
}

Мой тест:

let dispatchSave = jest.fn().mockResolvedValue({});
let dispatchNotification = jest.fn().mockReturnValue('Saved!');

it('should dispatch actions', () => {  
  const component = mount(<Comp dispatchSave={dispatchSave} dispatchNotification={dispatchNotification}>);
  const instance = component.find(Comp).instance() as Comp;
  instance.handleSave();

  expect(dispatchSave).toHaveBeenCalled();
  expect(dispatchNotification).toHaveBeenCalledWith('Saved!');
});

Первое утверждение работает, новторая диспетчеризация никогда не утверждается, потому что она появляется после асинхронного вызова (если я переместил ее выше, она работает).

Как я могу утверждать вызовы метода после асинхронного вызова?

Answer 1

Если this.props.dispatchNotification возвращает обещание (или вы можете сделать так, чтобы оно возвращало обещание), то вы могли бы вернуть этот результат в вызове handleSave.

handleSave = async () => {
  const response = await this.props.dispatchSave();
  return this.props.dispatchNotification();
}

В тесте вам нужно поставить префикс it с ключевым словом async и await для вызова функции.

it('should dispatch actions', async () => {  
  const component = mount(<Comp dispatchSave={dispatchSave} dispatchNotification={dispatchNotification}>);
  const instance = component.find(Comp).instance() as Comp;
  await instance.handleSave();

  expect(dispatchSave).toHaveBeenCalled();
  expect(dispatchNotification).toHaveBeenCalledWith('Saved!');
});