reactjs - 刷新 Promise 队列？

Question

使用 Jest 编写测试时，异步模拟 Axios 请求导致 setState()在安装组件后调用。这导致在测试运行期间出现控制台输出。

it('renders without crashing', () => {
  const mockAxios = new MockAdapter(axios);

  mockAxios.onGet(logsURL).reply(200, [...axios_logs_simple]);

  const div = document.createElement('div');
  ReactDOM.render(<Logs />, div);
  ReactDOM.unmountComponentAtNode(div);
});

而在 <Logs>成分:

componentDidMount() {
  axios.get(apiURL).then(response => {
    this.setState({data: response.data});
  });
}

我找到了一个 blog post显示了一个解决方案，但我不明白它是如何做任何有用的:

it('renders without crashing', async () => { //<-- async added here
  const mockAxios = new MockAdapter(axios);

  mockAxios.onGet(logsURL).reply(200, [...axios_logs_simple]);

  const div = document.createElement('div');
  ReactDOM.render(<Logs />, div);
  await flushPromises(); //<-- and this line here.
  ReactDOM.unmountComponentAtNode(div);
});

const flushPromises = () => new Promise(resolve => setImmediate(resolve));

据我了解，它创建了一个立即解决的新 promise 。那如何保证其他异步代码会解决？

现在，它解决了这个问题。在测试运行期间没有更多的控制台消息。测试仍然通过(这不是一个很好的测试)。但这看起来就像我刚刚降落在竞争条件的另一边，而不是首先阻止竞争条件。

Answer 1

我将从您需要此解决方案的原因开始。
原因是你没有引用 到 异步任务 并且你需要你的测试断言来运行 后 异步任务。
如果您拥有它，您只需 await在它上面，这将确保您的测试断言将运行 后 异步任务。 (在你的情况下是 ReactDOM.unmountComponentAtNode )
在您的示例中，异步任务在 componentDidMount 内其中 react 调用，因此您没有对异步任务的引用。
通常是 flushPromises 的简单实现将会:

const flushPromises = () => new Promise(resolve => setImmediate(resolve));

此实现基于 JavaScript 中的异步操作基于 的事实。任务队列 (javascript 有几种类型的异步任务队列)。
具体来说，promise 在微任务队列中排队。每次异步操作(例如 http 请求)完成时，异步任务都会出列并执行。
setImmediate 是一种获取回调并将其存储在 Immediates Queue 上的方法并将在事件循环的下一次迭代中调用。
此 Immediates Queue已检查 后 微任务队列(持有 promise )。
让我们分析一下代码，我们正在创建一个新的 promise，它在 排队。结束 的 Micro-task queue ，是 resolve将在事件循环的下一次迭代中被调用，这意味着它将在所有已经入队的 promise 之后被解决。
希望这个解释有帮助。
关注 如果在异步任务内部你将一个新的 promise 入队，它会在最后进入队列，这意味着 promise flushPromises return 不会追赶它。
很少有帖子/视频了解更多信息:

https://blog.insiderattack.net/promises-next-ticks-and-immediates-nodejs-event-loop-part-3-9226cbe7a6aa

https://www.youtube.com/watch?v=8aGhZQkoFbQ

https://www.youtube.com/watch?v=cCOL7MC4Pl0