Preact Signals 2.0.0 升级后 Jest 单元测试问题分析与解决方案

问题背景

在将 @preact/signals 从 1.3.1 升级到 2.0.0 版本后，开发者遇到了一个特定的 Jest 单元测试失败问题。该问题表现为：当子组件使用 useEffect 并且其依赖项包含来自父组件的信号属性时，会导致父组件的 useSignalEffect 回调失效。

问题复现条件

这个问题在以下特定条件下出现：

1. 父组件使用 useSignalEffect 监听信号变化
2. 子组件使用 useEffect 并依赖父组件传递的信号属性
3. 测试环境使用 act 包裹渲染操作
4. 运行时表现正常，仅测试环境出现问题

技术分析

经过深入分析，发现问题根源在于 Preact 的 act 实现机制。在测试环境中，act 会覆盖 requestAnimationFrame 以控制副作用执行时机。当同时存在以下两种更新时：

1. 由信号变化触发的更新
2. 由组件渲染触发的 useEffect

act 的默认实现会将这些更新合并为单一刷新队列，导致信号效果的更新可能被覆盖或丢失。

解决方案

Preact 核心团队在 10.25.4 版本中修复了这个问题。修复的核心思路是修改 act 实现，使其能够处理多个同步时机的更新队列，而不是单一的刷新操作。具体改进包括：

1. 将单一 flush 变量改为 flush 数组
2. 循环处理所有待执行的刷新操作
3. 每次刷新后重新渲染组件

这种改进确保了信号效果和常规效果的更新都能被正确处理，不会因为时序问题而丢失。

临时解决方案

在等待 Preact 更新期间，开发者可以采用以下临时解决方案之一：

1. 降级到 @preact/signals 1.3.1 版本
2. 在测试中避免同时使用信号效果和常规效果
3. 自定义 act 实现，支持多个更新队列

最佳实践建议

1. 在测试信号相关组件时，确保更新操作都包裹在 act 中
2. 注意组件层次结构中效果执行的顺序
3. 考虑将信号逻辑与 UI 逻辑分离，便于测试
4. 保持测试环境与生产环境的一致性

总结

这个问题展示了前端测试中时序控制的复杂性，特别是在响应式编程和虚拟DOM结合的场景下。Preact 团队通过改进 act 实现解决了这个问题，为开发者提供了更可靠的测试环境。这也提醒我们在升级依赖时需要充分测试各种边界条件，特别是涉及响应式编程和副作用管理的场景。