Fast-Check项目中React测试的异步调度问题分析与解决

问题背景

在Fast-Check项目的一次测试运行中，开发团队发现了一个与React测试相关的异步调度问题。具体表现为测试用例执行时控制台输出了警告信息："You seem to have overlapping act() calls, this is not supported. Be sure to await previous act() calls before making a new one."。

问题分析

这个警告表明在React测试环境中出现了act()调用的重叠问题。React的act()工具用于确保测试中所有状态更新和副作用都能正确完成后再进行断言。当多个act()调用同时进行而没有正确等待前一个完成时，就会出现这种警告。

深入分析后发现，问题根源在于测试代码中使用了自定义的Promise模拟对象：

const dummyResolvedPromise: PromiseLike<any> = { then: (f: () => any) => f() };

这种实现方式虽然模拟了Promise的基本行为，但存在两个关键问题：

1. 立即执行：then回调被立即同步执行，而不是异步执行
2. 不符合React预期：React的act()实现无法正确识别这种自定义Promise对象

解决方案

开发团队提出了三种可行的解决方案：

方案一：使用真正的Promise

const dummyResolvedPromise = Promise.resolve();

方案二：微任务调度

const dummyResolvedPromise = {
  then: (f: () => any) => queueMicrotask(f)
};

方案三：setTimeout调度

const dummyResolvedPromise = {
  then: (f: () => any) => setTimeout(f, 0)
};

这三种方案都能解决重叠act()调用的问题，因为它们都确保了回调的异步执行，符合React对Promise行为的预期。

技术原理

React的act()工具需要能够检测到所有异步操作的完成。当使用自定义Promise实现时，如果回调被同步执行，React无法正确跟踪异步操作的边界，导致它认为前一个act()调用还未完成时就开始了新的调用。

真正的Promise或使用queueMicrotask/setTimeout的模拟实现都能确保：

1. 回调被异步执行
2. React能够正确跟踪异步操作的开始和结束
3. 避免act()调用的重叠

最佳实践建议

在React测试中处理异步操作时，建议：

1. 优先使用原生Promise而不是自定义实现
2. 如果必须模拟Promise行为，确保回调是异步执行的
3. 避免在测试中混合同步和异步的act()调用
4. 确保所有异步操作都在act()内部或外部被正确处理

这个问题虽然看似简单，但它揭示了React测试中异步操作处理的重要性，特别是在使用测试工具和模拟对象时需要特别注意与React测试工具的兼容性。