React async await函数块按执行顺序使用Dispatch。

Question

我有一个React钩子组件，onChange事件会执行aync-await函数和一些dispatch，在我的mockup中测试了 store.dispatch 没有检测到被调用，如果我把我的 await function 在任何派发之前，只有当我把派发放在 await 函数之前，它才会检测到被调用，例如

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

但如果我把 await 放在派遣之后，测试用例通过了

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

当我运行我的应用程序时，上述三个案例之间的UI行为并没有真正的区别，既发生了dispatch，也发生了我的await函数，但我有点困惑，为什么我的测试用例不能检测到我的dispatch？有没有办法绕过或者强制从测试用例中解析我的 await 方法？

Answer 1

你必须考虑到 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)
});