@testing-library/react-native render method timeout for simple component

Question

I am testing the app navigation stack, and when rendering a very basic component it times out with the below error though there is no heavy loading in the component.

Error:

Ran all test suites.

error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. nitinpiparava@Nitins-MacBook-Pro chronextapp % yarn run test yarn run v1.22.10 $ jest FAIL tests/AppStack-test.js (11.447 s) AppStack ✕ renders the correct screen (10007 ms)

● AppStack › renders the correct screen

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)

Component

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 mock setup file

    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 Config

"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"
  }

What version of react native and react navigation are you using? — Majed Badawi, Sep 21 '21 at 08:49
@MajedBadawi "@react-navigation/bottom-tabs": "^5.11.11", "@react-navigation/native": "^5.9.4", "@react-navigation/stack": "^5.14.5", — Nitin, Sep 21 '21 at 08:51
Yes I did In fact If I can also do snapshot testing through react-test-renderer but as soon as I use the render function from @testing-library/react-native i get this error, in my demo app it works fine — Nitin, Sep 21 '21 at 08:57

Majed Badawi · Answer 1 · 2021-09-21T09:34:31.997

1

According to the documentation (5.x), you need to do the following in the jest setup file:

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');

In the jest.config.js, try adding those to setupFiles where the first is the setup file you mentioned:

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

And set transformIgnorePatterns:

transformIgnorePatterns: [
  'node_modules/(?!(@react-native' +
    '|react-native' +
    '|react-navigation-tabs' +
    '|react-native-reanimated' +
    '|react-native-iphone-x-helper' +
    '|@react-navigation' +    
    '|@react-navigation/stack' +
  ')/)',
]

edited Sep 21 '21 at 09:34

answered Sep 21 '21 at 08:56

Majed Badawi

27,616
4
25
48

I added my mock setup file in question – Nitin Sep 21 '21 at 09:01
Can you add ``jest.config.js`` as well – Majed Badawi Sep 21 '21 at 09:02
added jest config as well – Nitin Sep 21 '21 at 09:04
@Nitin the above additions work in my case – Majed Badawi Sep 21 '21 at 09:09
/Users/nitinpiparava/SourceCodes/chronextapp/node_modules/react-native-iphone-x-helper/index.js:1 ({"Object.":function(module,exports,require,__dirname,__filename,jest){import { Dimensions, Platform, StatusBar } from 'react-native'; ^^^^^^ SyntaxError: Cannot use import statement outside a module – Nitin Sep 21 '21 at 09:29
Yes missed that, list updated – Majed Badawi Sep 21 '21 at 09:34
issue was calling //jest.useFakeTimers(); before test, If remove that test works fine but I get below meesage ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From __tests__/AppStack-test.js. – Nitin Sep 21 '21 at 10:03
I guess that's another issue, but it's mentioned in other posts if you do the research – Majed Badawi Sep 21 '21 at 10:28
Yes I did research to fix this issue and all suggested to use jest.useFakeTimers(); which has introduced the original issue, jest is buggy – Nitin Sep 21 '21 at 10:33
Which part exactly is causing the issue? – Majed Badawi Sep 21 '21 at 10:34
jest.useFakeTimers(); if remove this line it works fine but then it gives below meesage ReferenceError: You are trying to import a file after the Jest environment has been torn down. From __tests__/AppStack-test.js. – Nitin Sep 21 '21 at 10:43
check this: https://github.com/facebook/jest/issues/6434 – Majed Badawi Sep 21 '21 at 10:46
yes was referring to this only , the most worked solution is jest.useFakeTimers(); if w use that it creates another issue , original issue i reported – Nitin Sep 21 '21 at 10:57
Have you tried the async await solution, or cleanup? – Majed Badawi Sep 21 '21 at 11:05
yes i am using async in test case does not help – Nitin Sep 21 '21 at 11:06
Setting the test as ``async`` is not enough, try wrapping the asynchronous part of the test in ``await act(async () => {});`` – Majed Badawi Sep 21 '21 at 11:14

@testing-library/react-native render method timeout for simple component

1 Answers1