React Native Jest Error: Cannot find module 'warnOnce' from 'react-native-implementation.js' - react-native

Question

I get this error when I run npm test. I've looked at a number of posts, solutions, etc. that suggest making edits to package.json, babel.config.js, jest.config.js and I still receive this error. I thought it could be a version issue with React Native, but I'm on the latest version 0.60.4 and it's mentioned in a few issues that this is solved in master. Perhaps I'm overlooking something, but I'm coming up short on what else it could be.
The following is the test that fails as a result:
import { geolocationRequest } from '../location';
let mockGeoCoding = jest.fn();
jest.mock('react-native-geocoding', () => ({
openURL: mockGeoCoding,
}));
describe('geolocationRequest', () => {
it('creates a properly formatted action', () => {
expect(geolocationRequest()).toMatchSnapshot();
})
})
Thoughts?
package.json
{
"name": "<app-name>",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start --config ../../../../rn-cli.config.js",
"start:ios": "react-native run-ios",
"start:android": "react-native run-android",
"clean:ios": "cd ios/ && pod deintegrate && pod install",
"clean:android": "cd android && ./gradlew clean",
"test": "jest --watch",
"test:coverage": "jest --coverage && open coverage/lcov-report/index.html",
"fix": "eslint --fix .",
"lint:ts": "tslint --fix --project ./tsconfig.json",
"lint:fix": "npm run lint:ts --fix",
"lint:check": "tslint --type-check --project"
},
"dependencies": {
"#react-native-community/async-storage": "1.4.2",
"appcenter": "1.12.2",
"appcenter-analytics": "1.12.2",
"appcenter-crashes": "1.12.2",
"axios": "^0.19.0",
"expo-font": "4.0.0",
"polyline": "0.2.0",
"react": "16.8.6",
"react-devtools": "3.6.1",
"react-native": "0.60.*",
"react-native-animatable": "1.3.2",
"react-native-auth0": "1.4.2",
"react-native-easy-grid": "0.2.1",
"react-native-elements": "1.1.0",
"react-native-geocoding": "0.3.0",
"react-native-gesture-handler": "1.3.0",
"react-native-maps": "0.24.2",
"react-native-vector-icons": "6.4.2",
"react-navigation": "3.9.1",
"react-redux": "7.1.0",
"redux": "4.0.0",
"redux-thunk": "2.3.0",
"scheduler": "0.14.0"
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.5.5",
"#babel/preset-typescript": "^7.3.3",
"#types/enzyme": "^3.10.3",
"#types/enzyme-adapter-react-16": "^1.0.5",
"#types/jest": "^24.0.17",
"#types/polyline": "0.1.28",
"#types/react": "16.8.13",
"#types/react-native": "0.57.43",
"#types/react-native-auth0": "1.3.0",
"#types/react-native-vector-icons": "6.4.0",
"#types/react-redux": "^7.1.1",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.0.1",
"babel-jest": "24.3.1",
"babel-preset-expo": "5.1.1",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"enzyme-to-json": "^3.4.0",
"eslint": "5.15.1",
"eslint-config-airbnb": "17.1.0",
"eslint-plugin-import": "2.16.0",
"eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-react": "7.12.4",
"jest": "^24.3.1",
"jest-fetch-mock": "^2.1.2",
"jest-localstorage-mock": "^2.4.0",
"metro-react-native-babel-preset": "0.53.0",
"react-dom": "^16.8.6",
"react-native-typescript-transformer": "1.2.12",
"react-test-renderer": "^16.6.3",
"redux-mock-store": "^1.5.3",
"ts-jest": "^24.0.2",
"tslint": "5.16.0",
"typescript": "3.4.3"
},
"jest": {
"preset": "react-native"
}
}
jest.config.js
module.exports = {
"preset": 'react-native',
"verbose": true,
"setupFilesAfterEnv": ["<rootDir>/__tests__/setup.js", "jest-localstorage-mock"],
"roots": [
"<rootDir>/src"
],
"transform": {
"^.+\\.tsx?$": "ts-jest",
},
"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
],
"testPathIgnorePatterns": ['/node_modules/'],
"snapshotSerializers": ["enzyme-to-json/serializer"],
// "collectCoverageFrom": ["src/**/*.tsx"],
"collectCoverage": true,
};
babel.config.js
module.exports = {
"presets": ["module:metro-react-native-babel-preset"]
}

Answer 1

I've been struggling with the same issue.
Based on this comment on github From harudev
[...] So I tested some files to test project, and find out "react-native.config.js" file was the reason.
If there is someone suffered this issue, try to remove file or options from one of your "*.config.js" 😅
So I did remove all of my *.config.js file and the error is now gone.
Hopefully this could help you.
Note that you can reproduce the behavior of the *.confing.js file with package.json

Answer 2

For me this happened at an update of RN from 0.59.10 to 0.61.4.
I tried several fixes but nothing worked.
The only workaround that I've found was to set metro.config.js as below:
const blacklist = require('metro-config/src/defaults/blacklist');
module.exports = {
resolver: {
blacklistRE: blacklist([
/node_modules\/.*\/node_modules\/react-native\/.*/,
]),
},
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
};
Source: jamalx31's answer from here:
https://github.com/facebook/react-native/issues/24065#issuecomment-537489786
The issue is reported and documented here:
https://github.com/facebook/react-native/issues/24065
and here:
https://github.com/facebook/react-native/issues/23943

Answer 3

Had the same error, after a good amount of soul searching (google searching)
i just ran npx react-native start oposed to runing my local react-native.