reactjs 使用React Native Testing Library和Jest进行测试时,React Navigation无法导航到屏幕

jjhzyzn0  于 12个月前  发布在  React
关注(0)|答案(1)|浏览(117)

我已经按照React Native Testing Library guide中的描述配置了所有内容。

测试用例描述-

我加载主屏幕,点击主屏幕中的一个列表项,该列表项将导航到电影详细信息屏幕,测试通过,直到点击列表项。我甚至可以在控制台中看到点击的控制台消息,但下一个屏幕没有导航,屏幕内容没有显示在**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.js.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();
        });
czq61nw1

czq61nw11#

我通过如下更新jest.js.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 Testing Library的GitHub example中的描述进行了这些更改,并且它工作了。

相关问题