使用React Native Testing Library与Jest测试时React Navigation无法跳转

问题核心 #

按官方指南配置RN Testing Library后，测试HomeScreen列表项点击跳转至MovieDetailScreen时，前序断言均通过、控制台能看到点击日志，但页面未跳转，screen.debug()也看不到目标页面内容。

排查与解决步骤 #

1. 修复测试清理函数的调用错误 #

你的afterEach写法有误，没有实际调用cleanup函数，会导致测试残留状态影响页面渲染：

// 错误写法
afterEach(() => cleanup);
// 正确写法
afterEach(cleanup);

2. 等待导航异步完成，用waitFor替代直接findByText #

点击跳转是异步行为，直接用findByText可能在页面还未完成切换时就执行断言，需要用waitFor包裹等待状态稳定：

fireEvent.press(listItem);

// 替换原有的findByText断言
await waitFor(() => {
  expect(screen.getByText('test movie')).toBeTruthy();
});

3. 验证导航逻辑是否正常触发 #

可以通过监听导航容器的路由变化，确认跳转动作是否被执行：

import { createNavigationContainerRef } from '@react-navigation/native';

test('Movie flow - integration test', async () => {
  const Stack = createNativeStackNavigator<RootStackParamList>();
  const navigationRef = createNavigationContainerRef();

  const component = (
    <NavigationContainer ref={navigationRef}>
      <Stack.Navigator>
        {/* ... 你的屏幕配置 */}
      </Stack.Navigator>
    </NavigationContainer>
  );

  renderWithProviders(component);

  // ... 前序断言代码

  fireEvent.press(listItem);

  // 先验证路由是否切换
  await waitFor(() => {
    expect(navigationRef.getCurrentRoute()?.name).toBe('MovieDetail');
  });

  // 再验证目标页面内容
  expect(screen.getByText('test movie')).toBeTruthy();
});

4. 检查renderWithProviders是否正确传递导航上下文 #

如果你的HomeScreen使用useNavigation钩子获取导航对象，需确保测试环境中该钩子能正常返回可用的导航实例。可以用@react-navigation/testing提供的工具完善renderWithProviders：

import { render } from '@testing-library/react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createMockNavigation } from '@react-navigation/testing';

export const renderWithProviders = (component) => {
  const mockNavigation = createMockNavigation();
  return render(
    <NavigationContainer>
      {component}
    </NavigationContainer>
  );
};

5. 排查Reanimated Mock是否干扰导航过渡 #

你的jest.setup中mock了Reanimated的call方法为noop，如果你的导航使用了Reanimated驱动的过渡动画，这可能导致页面切换逻辑未触发。可以尝试暂时注释该mock代码，测试是否恢复正常：

// 暂时注释这行，测试是否正常
// Reanimated.default.call = () => {};

如果注释后测试正常，可以改用更完善的Reanimated mock方案：

jest.mock('react-native-reanimated', () => require('react-native-reanimated/jest/mock'));

6. 完善Jest配置中的transformIgnorePatterns #

如果使用了@react-navigation/native-stack等导航子包，需确保它们被排除在transformIgnorePatterns之外，避免未转译的代码导致异常：

transformIgnorePatterns: [
  'node_modules/(?!(jest-)?@?react-native|@react-native-community|@react-navigation|@react-navigation/native-stack)',
],

额外检查点 #

• 确认HomeScreen中列表项的onPress逻辑正确调用了navigation.navigate('MovieDetail', ...)，没有遗漏参数或写错路由名称；
• 检查MovieDetailScreen是否正确接收参数并渲染test movie文本，确保目标页面本身没有渲染错误。

内容的提问来源于stack exchange，提问作者Shubham Hande