Реагируйте asyn c ожидайте функциональных блоков useDispatch в порядке выполнения - PullRequest
Новая
       80

Реагируйте asyn c ожидайте функциональных блоков useDispatch в порядке выполнения

0 голосов
/ 02 мая 2020

У меня есть компонент ловушки React, который событие onChange будет выполнять функцию ayn c -await и несколько диспетчеризаций. В моем тесте макета не было обнаружено, что store.dispatch вызывается, если я поместил свой await function вперед для любой отправки он будет обнаруживать вызов только в том случае, если я поместил диспетчер перед функцией ожидания, например, 

const onChange = async (userId) => {
    await someAsyncFn(userId);
    dispatch(selectUser(userId));    //not detected
    dispatch(selectGroup(userId);    //not detected
};
--Test.js
expect(store.dispatch).toHaveBeenCalledTimes(2) ---failed, only receive 0 times

, но если бы я разместил ожидание после отправки, тестовый пример прошел 

const onChange = async (userId) => {
    dispatch(selectUser(userId));     //detected
    dispatch(selectGroup(userId);     //detected
    await someAsyncFn(userId);
};
--Test.js
expect(store.dispatch).toHaveBeenCalledTimes(2) ---passed receive 2 times

Однако, если я разместил ожидание в промежутке между отправкой, обнаруживается только вышеприведенная отправка 

const onChange = async (userId) => {
    dispatch(selectUser(userId));     //detected
    await someAsyncFn(userId);
    dispatch(selectGroup(userId);     //not detected
};
--Test.js
expect(store.dispatch).toHaveBeenCalledTimes(2) ---failed, only detect selectUser being called

Когда я запускаю свое приложение, между этими тремя случаями нет реального различия в поведении пользовательского интерфейса , обе отправки произошли так же, как и моя функция ожидания, но я в некотором замешательстве, почему мой контрольный пример не сможет обнаружить мою отправку? Можно ли как-нибудь обойти или принудительно разрешить мой метод await из контрольного примера?

1 Ответ

1 голос
/ 02 мая 2020

Необходимо учитывать, что await используется для ожидания асинхронной задачи. Следовательно, когда вы вызываете await в методе async, следующий код не будет выполняться до тех пор, пока не будет решена асинхронная задача.

Скорее всего, вы не ожидаете в своем тестовом коде асинхронной задачи код для разрешения. Это приводит к тому, что все, что идет после await, не будет учтено в вашем тесте.

Чтобы дождаться разрешения асинхронного кода, вы должны определить свой тест как async и await для вашего тестируемого метода: 

test('testing on change', async () => {

    // Perform the call to the onChange method. Await for it to resolve.
    await onChange();

    // At this point, the calls to dispatch will have been done independently of their order in the onChange method.
    expect(store.dispatch).toHaveBeenCalledTimes(2)
});
...