SyntaxError - node_modules/react-native/Libraries/polyfills/error-guard.js: Missing semicolon. (14:4) on running jest in react native library

Question

I'm trying to setup jest for a react native library but I'm getting the below error

SyntaxError: react-native/Libraries/polyfills/error-guard.js: Missing semicolon. (14:4)

      12 | let _inGuard = 0;
      13 |
    > 14 | type ErrorHandler = (error: mixed, isFatal: boolean) => void;
         |     ^
      15 | type Fn<Args, Return> = (...Args) => Return;

react-native version : 0.61.5

app.js

import { Dimensions } from 'react-native';

function sum(a, b) {
    return a + b;
}
module.exports = sum;

app.test.js

const sum = require('./app');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

jest.config.js

module.exports ={
    preset : 'react-native',
    transformIgnorePatterns: [
        '/node_modules/(?!(@react-native|react-native)/).*/'
    ]
}

.babelrc

{
    "presets": ["react-native"]
}

I tried various solutions suggested like adding transformIgnorePatterns but to no avail. can someone help me here ?

Answer 1

It worked for me after I changed the .babelrc file to babel.config.js.

Answer 2

It also worked for me after I changed the .babelrc file to babel.config.js

module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
};

package.json

"react": "17.0.2",
"react-native": "0.67.4",
[...]
"@babel/core": "7.18.0",

Answer 3

I could finally fix this problem after a long struggle:

As Daniel said in the answer above we need to change the .babelrc file to babel.config.js. In addition to that we have to follow the below steps:

1. Define presets: ['module:metro-react-native-babel-preset'] in the babel.config.js file.
2. Add following packages to the package.json file: "@testing-library/jest-native": "^4.0.5", and "babel-plugin-transform-class-properties": "^6.24.1"