How do I clean up my React Native/Expo application to work with Jest? - react-native

Question

I have an existing project that uses React Native and Expo. Currently, the application runs fine. I'm trying to integrate Jest into the project. A basic "true=true" test in jest passes and runs without error. When I try to run any code using ES6 terms, however, the following error occurs:
FAIL screens/__tests__/home.test.js
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/Users/user/Documents/GitHub/ReadingRainbow/node_modules/react-native/index.js:13
import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo';
^^^^^^
SyntaxError: Cannot use import statement outside a module
1 | import React from 'react';
> 2 | import { Image, View, Text, Button, TouchableOpacity, ScrollView} from 'react-native';
| ^
3 | import { globalStyles } from '../styles/global';
4 | import { useNavigation } from '#react-navigation/native';
5 |
at Runtime._execModule (node_modules/jest-expo/node_modules/jest-runtime/build/index.js:1157:58)
at Object.<anonymous> (screens/home.js:2:1)
at Object.<anonymous> (screens/__tests__/home.test.js:2:1)
I have also set up a clean, brand new project (following these directions first and these second) to test the compare the dependencies and such against my current project. The clean project runs as intended, including import/export statements. How do I correct and clean up my real project so that jest runs without error?
I have tried deleting the node_modules folder and running npm install to reestablish the dependencies. I have also tried adjusting the preset configurations for jest, the transformIgnorePatterns, and the preset defined in babel.config.js. The most helpful explanation I've been given so far is, "[this is probably not working because] node can't use imports (without transpiling) and jest is trying to render using node instead of a browser." Any help is sincerely appreciated! Please let me know if you need further information or clarification.
Example file:
// Intro.js
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
const styles = StyleSheet.create({
container: {
alignItems: 'center',
backgroundColor: '#F5FCFF',
flex: 1,
justifyContent: 'center',
},
instructions: {
color: '#333333',
marginBottom: 5,
textAlign: 'center',
},
welcome: {
fontSize: 20,
margin: 10,
textAlign: 'center',
},
});
export default class Intro extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>
This is a React Native snapshot test.
</Text>
</View>
);
}
}
Example test:
// __tests__/Intro-test.js
import React from 'react';
import renderer from 'react-test-renderer';
import Intro from './Intro';
test('renders correctly', () => {
const tree = renderer.create(<Intro />).toJSON();
expect(tree).toMatchSnapshot();
});
package.json of "clean" project
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject",
"test": "jest"
},
"dependencies": {
"expo": "~39.0.2",
"expo-status-bar": "~1.0.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
"react-native-web": "~0.13.12"
},
"devDependencies": {
"#babel/core": "~7.9.0",
"jest-expo": "^39.0.0",
"react-test-renderer": "^17.0.1"
},
"jest": {
"preset": "jest-expo",
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|react-clone-referenced-element|#react-native-community|expo(nent)?|#expo(nent)?/.*|react-navigation|#react-navigation/.*|#unimodules/.*|unimodules|sentry-expo|native-base|#sentry/.*)"
]
},
"private": true
}
package.json of my actual project
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"test": "jest",
"test:update": "jest --verbose --coverage --updateSnapshot",
"test:watch": "jest --verbose --watch",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#react-native-community/masked-view": "0.1.10",
"#react-navigation/native": "^5.8.2",
"#react-navigation/stack": "^5.11.1",
"axios": "^0.20.0",
"expo": "~39.0.2",
"expo-status-bar": "~1.0.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.2.tar.gz",
"react-native-dotenv": "^2.4.2",
"react-native-gesture-handler": "~1.7.0",
"react-native-reanimated": "~1.13.0",
"react-native-safe-area-context": "3.1.4",
"react-native-screens": "~2.10.1",
"react-native-testing-library": "^6.0.0",
"react-native-web": "~0.13.12",
"react-navigation-stack": "^2.10.0"
},
"devDependencies": {
"#babel/core": "~7.9.0",
"#babel/preset-env": "^7.12.1",
"#babel/preset-react": "^7.12.1",
"#testing-library/react": "^11.1.0",
"babel-jest": "^26.6.2",
"jest": "^26.6.2",
"jest-expo": "^39.0.0",
"react": "^17.0.1",
"react-navigation": "^4.4.3",
"react-test-renderer": "^17.0.1"
},
"jest": {
"preset": "jest-expo",
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|react-clone-referenced-element|#react-native-community|expo(nent)?|#expo(nent)?/.*|react-navigation|#react-navigation/.*|#unimodules/.*|unimodules|sentry-expo|native-base|#sentry/.*)"
]
},
"private": true
}
babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};
jest.config.json (non-existent in "clean" project)
{
"testRegex": "((\\.|/*.)(test))\\.js?$"
}

Answer 1

In your __tests__/Intro-test.js file, just above the test, mock your component like this
jest.mock('./Intro', () => './Intro');
The content of your file will look like this:
// __tests__/Intro-test.js
import React from 'react';
import renderer from 'react-test-renderer';
import Intro from './Intro';
jest.mock('./Intro', () => './Intro');
test('renders correctly', () => {
const tree = renderer.create(<Intro />).toJSON();
expect(tree).toMatchSnapshot();
});
I was facing the exact same problem. Mocking my components solved the issue. I hope it will help you too.