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" component={HomeScreen} options={{title: 'Welcome'}} />
<Stack.Screen name="Details" component={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 component 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/commonjs/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/commonjs/useLinking.native.tsx:121:33)
at node_modules/@react-navigation/native/lib/commonjs/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)> component:
at NavigationContainerInner (/project/node_modules/@react-navigation/native/lib/commonjs/NavigationContainer.tsx:127:4)
at App
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/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 commitUpdateQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3683:9)
at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11855:11)
at commitLayoutEffects (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)
Advertisement
Answer
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 component. 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);
});
})