Jest and React Native Icons import problem - react-native

Question

I'm new to react native and i ran into a test problem.
First of all my application runs correctly.
The problem only occurs when i want to test my app with jest AND when there is an icon inside my app.
The following message tells me that there is probably a lazy import loading that conflicts with jest in some ways but i don't know how to workaround or fix this :
ReferenceError: You are trying to 'import' a file after the Jest environment has been torn down.
I've tested my app without icon="camera" and the test runs well so it is very related to icons.
The app also uses react-native-paper.
How can i test my app even when there are icons inside it ?
Here is a minimal App.js that reproduce the bug :
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Provider as PaperProvider } from 'react-native-paper';
import { Button } from 'react-native-paper';
export default function App() {
return (
<PaperProvider>
<View style={styles.container}>
<Text>Thi is a test</Text>
<Button icon="camera" mode="contained" onPress={() => console.log('Pressed')}>
Press me
</Button>
<StatusBar style="auto" />
</View>
</PaperProvider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
The jest test :
import React from 'react';
import renderer from 'react-test-renderer';
import App from './App';
jest.mock('react-native-vector-icons/FontAwesome', () => 'Icon');
describe('<App />', () => {
it('has 1 child', () => {
const tree = renderer.create(<App />).toJSON();
expect(tree.children.length).toBe(1);
});
});
The jest run log :
> # test C:\Users\slash\workspace\runpick
> jest
Expected react-native/jest-preset to define transform[^.+\.(bmp|gif|jpg|jpeg|mp4|png|psd|svg|webp)$]
react-native/jest-preset contained different transformIgnorePatterns than expected
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.
at Object.get Text [as Text] (node_modules/react-native/index.js:118:12)
at Icon.render (node_modules/#expo/vector-icons/build/vendor/react-native-vector-icons/lib/create-icon-set.js:120:58)
at finishClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7618:31)
at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7568:24)
at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9043:16)
PASS ./App.test.js
<App />
√ has 1 child (465ms)
console.error
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `Icon`.
in Icon (created by Icon)
in Icon (at MaterialCommunityIcon.tsx:87)
in Icon (created by Context.Consumer)
in ThemedComponent (created by withTheme(Icon))
in withTheme(Icon) (at Button.tsx:286)
in View (created by View)
in View (at Button.tsx:285)
in View (created by View)
in View (at Button.tsx:283)
in View (created by View)
in View (created by TouchableHighlight)
in TouchableHighlight (created by ForwardRef)
in ForwardRef (at TouchableRipple/index.native.tsx:91)
in TouchableRipple (created by Context.Consumer)
in ThemedComponent (created by withTheme(TouchableRipple))
in withTheme(TouchableRipple) (at Button.tsx:267)
in View (created by View)
in View (created by AnimatedComponent)
in AnimatedComponent (created by ForwardRef(AnimatedComponentWrapper))
in ForwardRef(AnimatedComponentWrapper) (at Surface.tsx:70)
in Surface (created by Context.Consumer)
in ThemedComponent (created by withTheme(Surface))
in withTheme(Surface) (at Button.tsx:257)
in Button (created by Context.Consumer)
in ThemedComponent (created by withTheme(Button))
in withTheme(Button) (created by App)
in View (created by View)
in View (created by App)
in ThemeProvider (at Provider.tsx:21)
in View (created by View)
in View (at PortalHost.tsx:128)
in Portal.Host (at Provider.tsx:17)
in Provider (created by App)
in App
at warningWithoutStack (node_modules/react/cjs/react.development.js:167:32)
at warning (node_modules/react/cjs/react.development.js:638:27)
at Object.createElementWithValidation [as createElement] (node_modules/react/cjs/react.development.js:2035:5)
at Icon.render (node_modules/#expo/vector-icons/build/vendor/react-native-vector-icons/lib/create-icon-set.js:120:31)
at finishClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7618:31)
at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7568:24)
at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9043:16)
console.error
The above error occurred in the <Icon> component:
in Icon (created by Icon)
in Icon (at MaterialCommunityIcon.tsx:87)
in Icon (created by Context.Consumer)
in ThemedComponent (created by withTheme(Icon))
in withTheme(Icon) (at Button.tsx:286)
in View (created by View)
in View (at Button.tsx:285)
in View (created by View)
in View (at Button.tsx:283)
in View (created by View)
in View (created by TouchableHighlight)
in TouchableHighlight (created by ForwardRef)
in ForwardRef (at TouchableRipple/index.native.tsx:91)
in TouchableRipple (created by Context.Consumer)
in ThemedComponent (created by withTheme(TouchableRipple))
in withTheme(TouchableRipple) (at Button.tsx:267)
in View (created by View)
in View (created by AnimatedComponent)
in AnimatedComponent (created by ForwardRef(AnimatedComponentWrapper))
in ForwardRef(AnimatedComponentWrapper) (at Surface.tsx:70)
in Surface (created by Context.Consumer)
in ThemedComponent (created by withTheme(Surface))
in withTheme(Surface) (at Button.tsx:257)
in Button (created by Context.Consumer)
in ThemedComponent (created by withTheme(Button))
in withTheme(Button) (created by App)
in View (created by View)
in View (created by App)
in ThemeProvider (at Provider.tsx:21)
in View (created by View)
in View (at PortalHost.tsx:128)
in Portal.Host (at Provider.tsx:17)
in Provider (created by App)
in App
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/docs/error-boundaries.html to learn more about error boundaries.
at logCapturedError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10141:21)
at logError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10178:5)
at update.callback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11288:5)
at callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3259:12)
at commitUpdateQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3280:9)
at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10497:11)
at commitLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13295:7)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 4.272s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! # test: `jest`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\slash\AppData\Roaming\npm-cache\_logs\2020-07-07T07_26_11_064Z-debug.log
The terminal process terminated with exit code: 1
Terminal will be reused by tasks, press any key to close it.

Answer 1

Create a jest setup file which contains the following or add this to your existing jest setup file:
jest.mock('react-native-paper');
Then make sure your setup file is being read by your jest config, either in the jest block of package.json or in your jest config file:
module.exports = {
preset: 'react-native',
setupFiles: ['./pathToJestSetupFile.js'],
...
}
Doing the above fixed the following error I was seeing that is similar to yours:
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.
at Object.get View [as View] (node_modules/react-native/index.js:150:12)
at PortalHost.render (node_modules/react-native-paper/lib/commonjs/components/Portal/PortalHost.js:221:43)
at finishClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7618:31)
at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7568:24)
at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9043:16)
● Cannot log after tests are done. Did you forget to wait for something async in your test?
Attempted to log "Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `Portal.Host`.
in Portal.Host (created by Provider)
in Provider (created by App)
in App".
at BufferedConsole.error (node_modules/jest-runner/node_modules/#jest/console/build/BufferedConsole.js:165:10)
at registerError (node_modules/react-native/Libraries/LogBox/LogBox.js:169:15)
at errorImpl (node_modules/react-native/Libraries/LogBox/LogBox.js:48:23)
at BufferedConsole.console.error (node_modules/react-native/Libraries/LogBox/LogBox.js:25:15)
at printWarning (node_modules/react/cjs/react.development.js:315:30)
at error (node_modules/react/cjs/react.development.js:287:5)
at Object.createElementWithValidation [as createElement] (node_modules/react/cjs/react.development.js:1788:7)
at PortalHost.render (node_modules/react-native-paper/lib/commonjs/components/Portal/PortalHost.js:221:16)
at finishClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7618:31)
at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7568:24)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.
at Object.get AccessibilityInfo [as AccessibilityInfo] (node_modules/react-native/index.js:9:12)
at Provider.componentWillUnmount (node_modules/react-native-paper/lib/commonjs/core/Provider.js:256:20)
at callComponentWillUnmountWithTimer (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10194:12)
at Object.invokeGuardedCallbackImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9897:10)
at invokeGuardedCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10073:31)
● Cannot log after tests are done. Did you forget to wait for something async in your test?
Attempted to log "The above error occurred in the <Context.Provider> component:
in Portal.Host (created by Provider)
in Provider (created by App)
in App
Consider adding an error boundary to your tree to customize error handling behavior.
Visit to learn more about error boundaries.".
● Cannot log after tests are done. Did you forget to wait for something async in your test?
Attempted to log "Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `Portal.Host`.