create-react-app jest encountered unexpected token {

Question

I'm developing a React app with a QR-scanner in it with create-react-app.
I've added the module react-qr-reader which in turn uses the modules webrtc-adapter.

It all works great, until I run yarn test. Then it shows me this error:

I've already ejected the project so I can use transformIgnorePatterns and added node_modules/webrtc-adapter to the array, but that still results in the same error.

Can anyone help me with this?

It's nothing more than the following: `npx create-react-app myProject` -> `yarn add react-qr-reader` -> `import QRReader from 'react-qr-reader';` in src/App.js -> `yarn test` — CherryNerd, Apr 03 '19 at 11:00

score 20 · Answer 1 · answered Jul 31 '19 at 21:44

If you don't want to eject from Create-React-App you can use the CLI in your package.json to override 'transformIgnorePatterns'.

Reference - https://github.com/facebook/create-react-app/issues/2537#issuecomment-390341713

  "scripts": {
    "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!your-module-name)/\"",
  },

score 7 · Answer 2 · answered Apr 04 '19 at 23:33

It's because of de ES6 syntax in a package into node_modules, you need to config the "transformIgnorePatterns" to transform this package.

The issue on Jest: https://github.com/facebook/jest/issues/2081

How to configure: http://facebook.github.io/jest/docs/tutorial-react-native.html#transformignorepatterns-customization

"transformIgnorePatterns": [
  "node_modules/(?!(react-qr-reader)/)"
]

if this doesn't work, use the babel.config.js with this configuration (is important the file ".js", this configuration don't work in ".babelrc" file):

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        "modules": "commonjs",
        "debug": false
      }
    ],
    /// your presets
  ],
  plugins: [
    //... your plugins
  ]
};

create-react-app jest encountered unexpected token {

2 Answers2

Linked