React Native Testing Library中TouchableOpacity二次渲染失败求助

问题现象 #

使用React Native Testing Library测试包含TouchableOpacity的组件时，首个测试用例渲染正常，但第二个测试必然失败。替换为TouchableWithoutFeedback则所有测试通过，其他带动画的Touchable组件（如TouchableHighlight）也会出现相同问题。

被测组件代码 #

import { TouchableOpacity, Text } from 'react-native';

const TestedComponent = () => (
  <TouchableOpacity testID="tested-component">
    <Text>Button</Text>
  </TouchableOpacity>
);

测试用例代码 #

describe('TestedComponent', () => {
  test('should render TestedComponent', () => {
    render(<TestedComponent />);
    expect(screen.getByTestId('tested-component')).toBeVisible();
  });

  test('should render TestedComponent', () => {
    render(<TestedComponent />);
    expect(screen.getByTestId('tested-component')).toBeVisible();
  });
});

报错信息 #

• 无效Hook调用警告：提示Hook只能在函数组件内部调用，可能原因包括React与渲染器版本不匹配、违反Hook规则、存在多个React副本。
• 错误栈指向ForwardRef组件，追溯至TouchableOpacity相关代码。
• TypeError：无法读取null的useReducer属性。

解决方案 #

1. 测试前重置动画模块 #

带动画的Touchable组件依赖Animated模块，测试间动画状态未重置会导致Hook调用异常。在beforeEach中添加重置逻辑：

import { Animated } from 'react-native';

beforeEach(() => {
  jest.resetModules();
  Animated.timing.mockReset();
});

2. 确保测试后清理状态 #

手动调用测试库的cleanup方法，强化测试隔离：

import { render, screen, cleanup } from '@testing-library/react-native';

afterEach(cleanup);

3. 全局Mock动画模块 #

在测试配置文件（如setupTests.js）中全局Mock动画，避免状态残留：

import { Animated } from 'react-native';

jest.mock('react-native/Libraries/Animated/src/Animated');
Animated.timing.mockImplementation(() => ({
  start: jest.fn(),
  stop: jest.fn(),
}));

4. 校验版本兼容性 #

确保React、React Native和React Native Testing Library的版本相互匹配，避免因版本差异导致的Hook调用问题。

原因分析 #

TouchableOpacity等带动画的组件内部使用Animated模块管理状态，测试套件默认的清理逻辑未完全重置动画相关的Hook状态，导致第二次测试时Hook调用环境异常，触发useReducer读取null的错误。

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