React Native Testing Library 13.x版本中并发模式下的错误测试问题解析

问题背景

在React Native Testing Library从12.x升级到13.x版本后，开发者在测试自定义Hook时发现了一个值得注意的行为变化。当Hook在渲染过程中抛出错误时，测试用例的表现与预期不符。这个问题特别出现在测试错误状态时，renderHook方法没有按预期抛出错误。

问题现象

考虑以下测试用例：

const service = jest.fn().mockReturnValue(42);

function useCustom(): number {
  const serviceResult = service();
  if (!serviceResult) {
    throw new Error("service did not return a result");
  }
  return serviceResult;
}

it("should throw if service does not return a result", () => {
  service.mockReturnValueOnce(undefined);
  expect(() => {
    renderHook(() => useCustom());
  }).toThrowErrorMatchingInlineSnapshot(`"service did not return a result"`);
});

在12.x版本中，这个测试能够正常通过，但在13.x版本中却失败了，错误提示为"Received function did not throw"。

问题根源

经过深入分析，发现这个问题与React 18引入的并发渲染模式(Concurrent Mode)有关。在13.x版本中，React Native Testing Library默认启用了并发渲染，这导致了以下行为变化：

1. 双调用现象：在并发模式下，React会出于优化目的，可能会多次调用组件和Hook
2. 错误处理差异：当组件或Hook抛出错误时，并发模式会尝试重新渲染一次
3. 同步测试限制：renderHook是同步执行的，而并发渲染中的错误可能是异步发生的

解决方案

临时解决方案

可以通过以下方式临时解决这个问题：

service.mockReturnValueOnce(undefined).mockReturnValueOnce(undefined);

或者更简单地使用：

service.mockReturnValue(undefined);

推荐解决方案

更规范的解决方式是显式关闭并发模式：

import { configure } from '@testing-library/react-native';

// 在测试文件或setup文件中
configure({ concurrentRoot: false });

最佳实践

对于测试中预期会抛出错误的场景，建议：

1. 使用Error Boundary来捕获渲染错误
2. 避免依赖同步错误捕获，因为并发模式下错误可能异步发生
3. 考虑使用act来包装可能抛出异步错误的代码

技术深入

并发模式下的渲染行为

在并发模式下，React会采用更智能的渲染策略：

1. 可中断渲染：React可以暂停、中止或重新开始渲染工作
2. 双缓冲：React会维护两套状态，一套是当前显示的，一套是正在准备的
3. 自动批处理：多个状态更新会被自动批处理

这些特性导致了Hook可能被多次调用，即使在没有显式使用Strict Mode的情况下。

错误边界的重要性

在并发模式下，传统的try-catch可能无法捕获所有渲染错误，因为：

1. 错误可能发生在不同的"时间片"中
2. React可能会尝试恢复渲染
3. 错误传播是异步的

因此，使用Error Boundary是更可靠的错误捕获方式。

迁移建议

对于从12.x升级到13.x的用户，建议：

1. 检查所有测试错误状态的测试用例
2. 考虑是否需要全局关闭并发模式
3. 对于关键的错误测试，重构为使用Error Boundary
4. 更新测试文档，说明并发模式下的行为差异

总结

React Native Testing Library 13.x引入的并发模式带来了更接近生产环境的渲染行为，但也带来了一些测试兼容性挑战。理解并发模式的工作原理，并采用适当的测试策略，可以帮助开发者编写更健壮的测试代码。对于错误测试场景，特别需要注意并发模式下的双渲染现象和异步错误处理特性。