How to configure Jest to work with Expo SDK 32 - react-native

Question

I have an Expo app and was using SDK 28. My team decided we should update to the latest version, that meant updating React Native (Since the latest SDK uses RN 0.57) and Babel.
When we updated our dependencies, and fixed our config files, Jest started to give us this error:
TypeError: Cannot read property 'fetch' of undefined
at node_modules/react-native/Libraries/vendor/core/whatwg-fetch.js:6:12
at Object.<anonymous> (node_modules/react-native/Libraries/vendor/core/whatwg-fetch.js:486:3)
at Object.<anonymous> (node_modules/jest-expo/src/setup.js:125:16)
After a few days debugging I found out this is related to babel-jest's pre-processor not working correctly, even though I followed their installation docs.
I dug around some more and found out that there's a workaround in this GitHub Issue thread.
Implementing the workaround, plus adding babel-hoist to my babel.config.js, made so that the tests started running.
However Jest's behavior is all wonky and the coverage data is not correct (it counts some lines as uncovered, even though we do have tests for them).
I want to know how to configure Jest properly for compatibility with Expo SDK 32.
These are the relevant config files (which are set to use the workaround mentioned previously).
package.json*
"dependencies": {
"#babel/preset-env": "^7.3.1",
"#expo/vector-icons": "6.3.1",
"expo": "^32.0.0",
"prop-types": "15.6.2",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"sentry-expo": "~1.9.0"
...
},
"devDependencies": {
"#babel/core": "^7.2.2",
"babel-eslint": "9.0.0",
"babel-plugin-jest-hoist": "^24.0.0",
"babel-preset-expo": "^5.0.0",
"enzyme": "3.8.0",
"enzyme-adapter-react-16": "^1.8.0",
"jest-expo": "^32.0.0",
"metro-react-native-babel-preset": "^0.51.1",
"react-dom": "^16.5.1",
...
},
"jest": {
"preset": "jest-expo",
"transform": {
"^.+\\.js$": "<rootDir>/jest.preprocessor.js"
},
"setupFiles": [
"<rootDir>/src/jest.setup.js"
],
...
}
* Some dependecies were omitted.
babel.config.js
module.exports = {
presets: [
'babel-preset-expo',
'module:metro-react-native-babel-preset',
'module:react-native-dotenv',
[
'#babel/preset-env',
{
targets: {
node: 'current',
},
},
],
],
sourceMaps: true,
plugins: [
'jest-hoist',
'#babel/transform-react-jsx-source',
],
};

Answer 1

This is what solved the problem for me:
First thing, install yarn. Follow this link for instructions.
Second, ensure your package.json looks something like this:
"dependencies": {
"#expo/vector-icons": "9.0.0",
"expo": "^32.0.0",
"prop-types": "15.6.2",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
...
},
"devDependencies": {
"babel-preset-expo": "^5.0.0",
"jest-expo": "^32.0.0",
...
}
"scripts": {
"test": "jest",
...
},
"jest": {
"preset": "jest-expo",
"transform": {
"^.+\\.js$": "babel-jest"
},
}
Third, ensure your babel.config.js is setup correctly. Here's the one from my project running Expo's SDK 32:
module.exports = function (api) {
api.cache(true);
return {
presets: [
'babel-preset-expo',
'module:react-native-dotenv',
],
sourceMaps: true,
plugins: [
'#babel/transform-react-jsx-source',
],
};
};
Lastly, use yarn to install your packages (yarn install) and to run your tests yarn test.

Answer 2

Expo automatically do setup of jest.
I think you must do 'Expo init newProject', then read .babelrc and package.json
Below is result of expo init.
It works well.
// package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject",
"test": "node ./node_modules/jest/bin/jest.js --watchAll"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"#expo/samples": "2.1.1",
"expo": "^32.0.0",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-navigation": "^3.0.9"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0",
"jest-expo": "^32.0.0"
},
"private": true
}
// babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};