Компоненты функции Test React обещают поведение с Jest,

Question

У меня есть компонент функции React. Я передаю компоненту функцию как опору, которая возвращает обещание. Я использую эту функцию на onClickсобытие, и как только обещание выполнено, я изменяю состояние компонента. Что-то вроде:

      import React, { useState } from 'react';

function myComponent({ aPromiseReturningFunction }) {
    const [myState, setState] = useState('12');
    const clickHandler = () => {
      aPromiseReturningFunction().then(() => { setState('123') })
    };

    return <div onClick={ clickHandler }>{myState}</div>
}

Внутри моего теста:

      const myFunc = jest.fn(() => Promise.resolve(true));
const componentWrapper = shallow(<myComponent aPromiseReturningFunction={ myFunc }/>);
componentWrapper.simulate('click');
expect(componentWrapper.text()).toEqual('123');

Очевидно, что вышеперечисленное не работает, но я не нашел ничего, что объясняло бы, как правильно проверить это. Конечно, если я изменю состояние вне обещания, тест пройдет.

Какие-либо предложения?

Answer 1

С clickобновляет состояние после асинхронного обещания, я бы использовал act

      import { act } from 'react-dom/test-utils'; // other testing libraries have similar methods that test async events

const myFunc = jest.fn(() => Promise.resolve(true));

it('updates text after onclick', () => {
  const componentWrapper = shallow(<myComponent aPromiseReturningFunction={ myFunc }/>);
  act(() => {
    componentWrapper.simulate('click');
  });

  expect(componentWrapper.text()).toEqual('123');
});

Answer 2

Благодаря alextrastero мне в конце концов удалось прийти к решению.

Чего не хватает в ответе alextrastero, так это того, что мы должны заключить act() внутри async / await как:

      import { act } from 'react-dom/test-utils'; // other testing libraries have similar methods that test async events

const myFunc = jest.fn(() => Promise.resolve(true));

it('updates text after onclick', async () => {
  const componentWrapper = shallow(<myComponent aPromiseReturningFunction={ myFunc }/>);
  await act(() => {
    componentWrapper.simulate('click');
  });

  expect(componentWrapper.text()).toEqual('123');
});

И для того, чтобы это работало, мне также нужно было использовать regenerator-runtime/runtime упаковка.