1

我正在测试应用程序导航堆栈，当渲染一个非常基本的组件时，它会超时并出现以下错误，尽管组件中没有重载。

错误：

Ran all test suites.

error 命令失败，退出代码为 1。 info 访问https://yarnpkg.com/en/docs/cli/run以获取有关此命令的文档。nitinpiparava@Nitins-MacBook-Pro chronextapp % yarn run test yarn run v1.22.10 $ jest FAIL tests /AppStack-test.js (11.447 s) AppStack ✕ 渲染正确的屏幕 (10007 ms)

● AppStack › 呈现正确的屏幕

thrown: "Exceeded timeout of 5000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  21 |
  22 | describe('AppStack', () => {
> 23 |   it('renders the correct screen', async () => {
     |   ^
  24 |     const { getByText } = render(
  25 |       <NavigationContainer>
  26 |         <AppStack1 />

  at __tests__/AppStack-test.js:23:3
  at Object.<anonymous> (__tests__/AppStack-test.js:22:1)

零件

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

export const Screen1 = ({ navigation }) => (
  <View style={styles.container}>
    <Text>Screen 1</Text>
    <Button title='Go to Screen 2' onPress={() => navigation.push('Screen2')} />
  </View>
);

export const Screen2 = () => (
  <View style={styles.container}>
    <Text>Screen 2</Text>
  </View>
);

const Stack = createStackNavigator();
export const AppStack1 = () => (
  <Stack.Navigator>
    <Stack.Screen name='Screen1' component={Screen1} />
    <Stack.Screen name='Screen2' component={Screen2} />
  </Stack.Navigator>
);

const SignIn = () => (
  <View style={styles.container}>
    <Text>Sign In</Text>
  </View>
);

const AuthStack = () => (
  <Stack.Navigator>
    <Stack.Screen name='SignIn' component={SignIn} />
  </Stack.Navigator>
);

export default ({ isLoggedIn = true }) => (
  <NavigationContainer>
    {isLoggedIn ? <AppStack1 /> : <AuthStack />}
  </NavigationContainer>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Ject 模拟设置文件

    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.mock('rn-fetch-blob', () => {
  return {
    __esModule: true,
    default: {
      fs: {
        unlink: jest.fn(),
      },
    },
  };
});

笑话配置

"jest": {
    "preset": "react-native",
    "moduleNameMapper": {
      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
    },
    "setupFiles": [
      "./src/__mocks__/@react-native-async-storage/setup.js"
    ],
    "transform": {
      "^.+\\.jsx$": "babel-jest",
      "^.+\\.tsx$": "babel-jest"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!@react-native|react-native)"
    ]
  },
  "resolutions": {
    "react-native/@jest/create-cache-key-function": "^27.0.2"
  }
4

1 回答 1

1

根据文档（5.x），您需要在 jest setup 文件中执行以下操作：

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/src/NativeAnimatedHelper');

// As of react-native@0.64.X file has moved
jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

在 中jest.config.js，尝试将那些添加到setupFiles您提到的第一个安装文件的位置：

['./jestSetup.js', './node_modules/react-native-gesture-handler/jestSetup.js']

并设置transformIgnorePatterns：

transformIgnorePatterns: [
  'node_modules/(?!(@react-native' +
    '|react-native' +
    '|react-navigation-tabs' +
    '|react-native-reanimated' +
    '|react-native-iphone-x-helper' +
    '|@react-navigation' +    
    '|@react-navigation/stack' +
  ')/)',
]
于 2021-09-21T08:56:08.550 回答