Sentry-react-native: Running `yarn test` fails when integrating Sentry - SyntaxError: Unexpected token export at import *

Created on 24 Sep 2019  路  5Comments  路  Source: getsentry/sentry-react-native

OS:

  • [ ] Windows
  • [x] MacOS
  • [ ] Linux

_Platform:_

  • [x] iOS
  • [ ] Android

SDK:

  • [x] @sentry/react-native
  • [ ] react-native-sentry

react-native version: 0.60.6

Init Code:

Sentry.init({
  dsn: 'https://[email protected]/...'
});

I have following issue:

After setting up Sentry per the docs, running yarn test fails.

More specifically, it fails after running Sentry Wizard. The following error occurs:

/MyApp/node_modules/@sentry/react-native/dist/js/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export { Severity, Status } from "@sentry/types";
                                                                                         ^^^^^^

SyntaxError: Unexpected token export

  25 | } from 'react-native/Libraries/NewAppScreen';
  26 | 
> 27 | import * as Sentry from '@sentry/react-native';
     | ^
  28 | 
  29 | Sentry.init({ 
  30 |   dsn: 'MY_DSN', 

  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
  at Object.<anonymous> (App.js:27:1)

Steps to reproduce:
Here is a sample project demonstrating the issue along with STRs:

https://github.com/hkellaway/sentry-reactnative-yarntest-error-demo

Generally, the least you have to do to produce this error is to:

  • generate a brand new project with react-native CLI
  • follow the Sentry docs for "Integrating the SDK"
  • after the Sentry Wizard step, run yarn test

Actual result:
yarn test fails after setting up Sentry for a React Native project

Expected result:
Integrating Sentry should not disrupt yarn test for React Native projects

Most helpful comment

Google spit out this:

https://jestjs.io/docs/en/tutorial-react-native#transformignorepatterns-customization

It fixes it for me if I add this to package.json:

 "jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(?!(react-native|react-native-cookies|@sentry/react-native)/)"
    ]
  }

All 5 comments

Google spit out this:

https://jestjs.io/docs/en/tutorial-react-native#transformignorepatterns-customization

It fixes it for me if I add this to package.json:

 "jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(?!(react-native|react-native-cookies|@sentry/react-native)/)"
    ]
  }

i appreciate you investigating & responding despite it not being a Sentry issue, rather a Jest configuration

for others who may encounter this - confirmed this does fix error message

Thank god I found this post.

The right config for Expo Sdk is

"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/.*)"
  ]
}

see it at https://docs.expo.io/guides/testing-with-jest/

I fixed it by mocking Sentry in jest.setup.js:
jest.mock('@sentry/react-native', () => ({ init: () => jest.fn() }));

and adding jest.setup.js to jest.config.js:

module.exports = {
  preset: 'react-native',
  transform: {
    '\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js',
  },
  cacheDirectory: '.jest/cache',
  setupFiles: ['./jest.setup.js'],
};
Was this page helpful?
0 / 5 - 0 ratings