My code is extremely simple. Simply making sure my dev setup is proper.

App.js

export default function App() {
  return (
    <NavigationContainer>
      {/* <View style={styles.container}>
        <Text>Hello Modules!</Text>
        <StatusBar style="auto" />
      </View> */}
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" ponent={HomeScreen} options={{title: 'Wele'}} />
        <Stack.Screen name="Details" ponent={DetailsScreen} options={{title: 'Details'}} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

App.test

import React from 'react';
import App from '../App';
import renderer from 'react-test-renderer';


describe('<App /> Basics', () => {
  it('has 1 child', async () => {
    const tree = renderer.create(<App />).toJSON();
    expect(tree.children.length).toBe(1);
  });
  it('renders correctly', async () => {
    const tree = renderer.create(<App />).toJSON();
    expect(tree).toMatchSnapshot();
  });
  it('renders correctly', async () => {
    renderer.create(<App />);
  });
});

The test passes. but I still get:

 PASS  __tests__/App.test.js
  <App /> Basics
    ✓ has 1 child (46 ms)
    ✓ renders correctly (9 ms)
    ✓ renders correctly (4 ms)

 › 1 snapshot written.
Snapshot Summary
 › 1 snapshot written from 1 test suite.

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   1 written, 1 total
Time:        1.033 s, estimated 2 s
Ran all test suites.

ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.

There's no async code that needs await. Any tips on understanding the reason for this error and how to resolve it? I don't see the need for mocks or anything else in some of the answers I've seen. The problem seems to be Stack Navigator.

Update 1

Simplifying to the most minimal testing and ponent setup. As soon as I create a <NavigationContainer> object the error arises:

$ npm test

> @ test /project
> jest

 PASS  __tests__/App.test.js
  <App /> Basics
    ✓ renders App (30 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.167 s, estimated 2 s
Ran all test suites.

ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.

      at Object.get BackHandler [as BackHandler] (node_modules/react-native/index.js:191:12)
      at node_modules/@react-navigation/native/lib/monjs/useBackButton.js:64:37
      at invokePassiveEffectCreate (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14504:20)
      at Object.invokeGuardedCallbackProd (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11308:10)
      at invokeGuardedCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11499:31)

ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.

      23 |   );
      24 | }
    > 25 | 
         | ^
      26 | const styles = StyleSheet.create({
      27 |   container: {
      28 |     flex: 1,

      at Object.get View [as View] (node_modules/react-native/index.js:150:12)
      at App (App.js:25:116)
      at describeNativeComponentFrame (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1024:7)
      at describeFunctionComponentFrame (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1112:12)
      at describeFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2640:14)

ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.

      25 | 
      26 | const styles = StyleSheet.create({
    > 27 |   container: {
         |                         ^
      28 |     flex: 1,
      29 |     backgroundColor: '#fff',
      30 |     alignItems: 'center',

      at Object.get Text [as Text] (node_modules/react-native/index.js:122:12)
      at App (App.js:27:48)
      at describeNativeComponentFrame (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1024:7)
      at describeFunctionComponentFrame (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1112:12)
      at describeFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2640:14)

ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.

      at Object.useCallback [as Linking] (node_modules/react-native/index.js:246:12)
      at subscribe (node_modules/@react-navigation/native/lib/monjs/useLinking.native.tsx:121:33)
      at node_modules/@react-navigation/native/lib/monjs/useLinking.native.js:206:12
      at invokePassiveEffectCreate (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14504:20)
      at Object.invokeGuardedCallbackProd (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11308:10)
  console.error
    The above error occurred in the <ForwardRef(NavigationContainerInner)> ponent:
    
        at NavigationContainerInner (/project/node_modules/@react-navigation/native/lib/monjs/NavigationContainer.tsx:127:4)
        at App
    
    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit  to learn more about error boundaries.

      at logCapturedError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10989:23)
      at update.callback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11022:5)
      at callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3662:12)
      at mitUpdateQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3683:9)
      at mitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11855:11)
      at mitLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14443:7)
      at Object.invokeGuardedCallbackProd (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11308:10)

My code is extremely simple. Simply making sure my dev setup is proper.

App.js

export default function App() {
  return (
    <NavigationContainer>
      {/* <View style={styles.container}>
        <Text>Hello Modules!</Text>
        <StatusBar style="auto" />
      </View> */}
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" ponent={HomeScreen} options={{title: 'Wele'}} />
        <Stack.Screen name="Details" ponent={DetailsScreen} options={{title: 'Details'}} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

App.test

import React from 'react';
import App from '../App';
import renderer from 'react-test-renderer';


describe('<App /> Basics', () => {
  it('has 1 child', async () => {
    const tree = renderer.create(<App />).toJSON();
    expect(tree.children.length).toBe(1);
  });
  it('renders correctly', async () => {
    const tree = renderer.create(<App />).toJSON();
    expect(tree).toMatchSnapshot();
  });
  it('renders correctly', async () => {
    renderer.create(<App />);
  });
});

The test passes. but I still get:

 PASS  __tests__/App.test.js
  <App /> Basics
    ✓ has 1 child (46 ms)
    ✓ renders correctly (9 ms)
    ✓ renders correctly (4 ms)

 › 1 snapshot written.
Snapshot Summary
 › 1 snapshot written from 1 test suite.

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   1 written, 1 total
Time:        1.033 s, estimated 2 s
Ran all test suites.

ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.

There's no async code that needs await. Any tips on understanding the reason for this error and how to resolve it? I don't see the need for mocks or anything else in some of the answers I've seen. The problem seems to be Stack Navigator.

Update 1

Simplifying to the most minimal testing and ponent setup. As soon as I create a <NavigationContainer> object the error arises:

$ npm test

> @ test /project
> jest

 PASS  __tests__/App.test.js
  <App /> Basics
    ✓ renders App (30 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.167 s, estimated 2 s
Ran all test suites.

ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.

      at Object.get BackHandler [as BackHandler] (node_modules/react-native/index.js:191:12)
      at node_modules/@react-navigation/native/lib/monjs/useBackButton.js:64:37
      at invokePassiveEffectCreate (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14504:20)
      at Object.invokeGuardedCallbackProd (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11308:10)
      at invokeGuardedCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11499:31)

ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.

      23 |   );
      24 | }
    > 25 | 
         | ^
      26 | const styles = StyleSheet.create({
      27 |   container: {
      28 |     flex: 1,

      at Object.get View [as View] (node_modules/react-native/index.js:150:12)
      at App (App.js:25:116)
      at describeNativeComponentFrame (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1024:7)
      at describeFunctionComponentFrame (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1112:12)
      at describeFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2640:14)

ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.

      25 | 
      26 | const styles = StyleSheet.create({
    > 27 |   container: {
         |                         ^
      28 |     flex: 1,
      29 |     backgroundColor: '#fff',
      30 |     alignItems: 'center',

      at Object.get Text [as Text] (node_modules/react-native/index.js:122:12)
      at App (App.js:27:48)
      at describeNativeComponentFrame (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1024:7)
      at describeFunctionComponentFrame (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1112:12)
      at describeFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2640:14)

ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.

      at Object.useCallback [as Linking] (node_modules/react-native/index.js:246:12)
      at subscribe (node_modules/@react-navigation/native/lib/monjs/useLinking.native.tsx:121:33)
      at node_modules/@react-navigation/native/lib/monjs/useLinking.native.js:206:12
      at invokePassiveEffectCreate (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14504:20)
      at Object.invokeGuardedCallbackProd (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11308:10)
  console.error
    The above error occurred in the <ForwardRef(NavigationContainerInner)> ponent:
    
        at NavigationContainerInner (/project/node_modules/@react-navigation/native/lib/monjs/NavigationContainer.tsx:127:4)
        at App
    
    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://reactjs/link/error-boundaries to learn more about error boundaries.

      at logCapturedError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10989:23)
      at update.callback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11022:5)
      at callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3662:12)
      at mitUpdateQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3683:9)
      at mitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11855:11)
      at mitLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14443:7)
      at Object.invokeGuardedCallbackProd (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11308:10)

• javascript
• react-native
• jestjs

1 Answer 1

I think something in the NavigationContainer or its children has animations that need to be await-ed before you exit the test.

As you're using react-test-renderer you can use act to render and update your ponent. Something like this should work:

import {create, act} from 'react-test-renderer';

describe('<App /> Basics', () => {
  it('has 1 child', async () => {
    let tree
    act(()=>{
       tree = create(<App />)
    })
    expect(tree.toJSON().children.length).toBe(1);
  });
})