Enzyme如何处理异步以同步React组件树？两种异步场景差异解析

核心逻辑：Enzyme如何追踪组件更新 #

Enzyme的自动同步依赖React的批量更新机制。它会监听React内部的批量更新队列，在测试代码的同步执行阶段结束后，自动触发组件树刷新——但这个追踪只覆盖React能识别的异步上下文。

两种异步场景的差异原因 #

1. 自动同步的async函数场景 #

(async () => setLogo({ logo: "j" }))();

React从v16开始，会自动将async函数内部的状态更新纳入批量更新队列。当你执行自调用的async函数时：

• async函数的执行上下文被React标记为可批量处理的范围
• setLogo的调用被加入React的批量更新队列
• 同步代码执行完毕后，Enzyme会自动触发React的批量更新，同步组件树，不需要手动调用update()

2. 需手动同步的Promise.then场景 #

Promise.resolve().then(() => setLogo({ logo: "j" }));

原生Promise的回调运行在React批量更新机制的覆盖范围之外：

• React不会主动将Promise回调内的状态更新纳入批量队列
• setLogo在独立的微任务中执行，Enzyme无法自动追踪到这个异步更新
• 因此必须手动调用wrapper.update()，强制Enzyme刷新组件树

额外验证与解决方案 #

• 如果在async函数里加await Promise.resolve()，setLogo依然在async上下文内，React还是会批量处理，Enzyme能自动同步
• 要让Promise.then场景也自动同步，可以手动用React的批量更新API包裹：

  import { unstable_batchedUpdates } from 'react-dom';
  Promise.resolve().then(() => {
    unstable_batchedUpdates(() => setLogo({ logo: "j" }));
  });
  

  这样Enzyme就能识别到批量更新，自动同步组件树。

内容的提问来源于stack exchange，提问作者papillon