React Native Testing Library 测试中 useMemo 报错问题解析

问题背景

在使用 React Native Testing Library 进行组件测试时，开发者经常会遇到各种奇怪的错误。本文重点分析一个典型的测试场景中出现 "Cannot read properties of null (reading 'useMemo')" 错误的案例。

测试场景还原

测试对象是一个包含列表和重定向功能的复合组件。主要功能包括：

1. 加载状态显示
2. 列表项点击设置值
3. 重定向操作

测试用例主要验证：

• 加载状态是否正确显示
• 点击列表项后是否能正确触发重定向

错误现象

开发者最初遇到两个主要问题：

1. 多元素匹配错误：在测试重定向按钮时，发现存在多个相同 testID 的元素
2. useMemo 空指针错误：在添加 cleanup 和 resetModules 后，出现 VirtualizedListContext 中的 useMemo 读取失败

问题根源分析

多元素匹配问题

出现多个相同 testID 元素通常有以下原因：

• 组件被意外多次渲染
• 测试环境未正确清理导致组件残留
• 全局状态污染导致组件实例重复

useMemo 空指针问题

这个错误更为严重，表明 React 内部机制出现了问题。主要原因可能是：

1. 模块重置不当：jest.resetModules() 清除了 React 内部模块但未正确处理依赖关系
2. 测试环境污染：测试之间的状态未完全隔离
3. 异步操作未完成：组件卸载时仍有未完成的异步操作

解决方案建议

1. 避免过度清理

React Testing Library 已经自动处理了 cleanup 操作，手动调用反而可能导致问题。建议：

• 移除显式的 cleanup 调用
• 谨慎使用 resetModules，除非确实需要

2. 改进模拟方式

使用 jest.spyOn 替代直接模块替换：

// 替代 jest.mock 的方式
jest.spyOn(uiControllerModule, 'default').mockReturnValue({
  data: [],
  loading: true
})

3. 优化测试结构

• 减少不必要的模拟：如重定向组件可以直接使用真实实现
• 关注行为而非实现：测试用户交互而非内部状态
• 隔离测试用例：确保每个测试完全独立

最佳实践

1. 单一职责测试：每个测试只验证一个功能点
2. 最小化模拟：只模拟必要的依赖
3. 优先使用真实组件：减少模拟带来的维护成本
4. 避免全局状态污染：使用 beforeEach/afterEach 正确管理测试环境

总结

React Native 测试中的这类问题往往源于测试环境管理不当。通过遵循测试最佳实践、减少不必要的清理操作、合理使用模拟技术，可以显著提高测试的稳定性和可维护性。记住，好的测试应该像文档一样清晰，而不是成为维护的负担。