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.