使用 React Native 测试库和 Jest 进行测试时，React Navigation 未导航到屏幕

Question

我已按照 React Native 测试库指南中所述配置了所有内容。

测试用例描述-

我加载主屏幕，点击主屏幕中的列表项，导航到电影详细信息屏幕，测试通过，直到点击列表项。我什至可以在控制台中看到点击的控制台消息，但下一个屏幕没有导航，并且屏幕内容没有显示在 screen.debug()。

这是我的 jest.setup.js

import 'react-native-gesture-handler/jestSetup';

    jest.mock('react-native-reanimated', () => {
      const Reanimated = require('react-native-reanimated/mock');
    
      // The mock for `call` immediately calls the callback which is incorrect
      // So we override it with a no-op
      Reanimated.default.call = () => {};
    
      return Reanimated;
    });
    
    // Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
    jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

jest.config.js -

 module.exports = {
  preset: 'react-native',
  setupFiles: ['./node_modules/react-native-gesture-handler/jestSetup.js'],
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  transformIgnorePatterns: [
    'node_modules/(?!(jest-)?@?react-native|@react-native-community|@react-navigation)',
  ],
};

MovieFlow.test.tsx

    afterEach(() => cleanup);
        
        test('Movie flow - integration test', async () => {
          //load the app with main screen
          const Stack = createNativeStackNavigator<RootStackParamList>();
        
          const component = (
            <NavigationContainer>
              <Stack.Navigator>
                <Stack.Screen
                  name="Home"
                  component={HomeScreen}
                  options={{headerShown: false}}
                />
                <Stack.Screen
                  name="MovieDetail"
                  component={MovieDetailScreen}
                  options={{headerShown: false}}
                />
              </Stack.Navigator>
            </NavigationContainer>
          );
        
          renderWithProviders(component);
        
          //verify initial loading state
          expect(screen.queryByText('Trending now')).toBeNull();
        
          //verify data loaded state by section titles
          expect(await screen.findByText('Trending now')).toBeDefined();
        
          const listItem = await screen.findByTestId(TestIds.trendingListItem + 0);
          expect(listItem).toBeDefined();
        
          fireEvent.press(listItem);

          const newScreen = await screen.findByText('test movie');
          expect(newScreen).toBeDefined();
        
          //It should display the content of the movie detail screen here, but it's not showing
          screen.debug();
        });

Answer 1

我通过更新 jest.config.js 修复了它，如下所示：

从-

module.exports = {
  preset: 'react-native',
  setupFiles: ['./node_modules/react-native-gesture-handler/jestSetup.js'],
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  transformIgnorePatterns: [
    'node_modules/(?!(jest-)?@?react-native|@react-native-community|@react-navigation)',
  ],
};

至

module.exports = {
  preset: 'react-native',
  setupFilesAfterEnv: [
    './node_modules/react-native-gesture-handler/jestSetup.js',
    './jest-setup.js',
  ],
  transformIgnorePatterns: [
    'node_modules/(?!(jest-)?react-native|@react-native|@react-native-community|@react-navigation)',
  ],
};

我按照 React Native 测试库的 GitHub 示例中所述进行了这些更改，并且它起作用了。