5

When trying to run a test Jest throws the encountered unexpected token error. I'm using ky http, which obviously causes the problem and not get's transpiled.

 Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    Z:\sepview.web\sepview-react\node_modules\ky\index.js:277
    export default createInstance();
    ^^^^^^

    SyntaxError: Unexpected token export

      1 | import * as React from 'react';
    > 2 | import ky from 'ky';
        | ^
      3 |
      4 | class HttpService extends React.Component {
      5 |

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at Object.<anonymous> (src/components/HttpService.tsx:2:1)

Test Suites: 1 failed, 1 total

Here's my package.json

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.7",
    "@fortawesome/free-solid-svg-icons": "^5.4.2",
    "@fortawesome/react-fontawesome": "^0.1.3",
    "@types/d3": "^5.0.1",
    "bootstrap": "^4.1.3",
    "bootswatch": "^4.1.3",
    "d3": "^5.7.0",
    "d3-array": "^2.0.2",
    "jquery": "^3.3.1",
    "ky": "^0.5.1",
    "moment": "^2.22.2",
    "node-sass": "^4.9.4",
    "popper.js": "^1.14.4",
    "react": "^16.6.0",
    "react-dom": "^16.6.0",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.1",
    "typescript": "^3.1.6"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@types/enzyme": "^3.1.14",
    "@types/enzyme-adapter-react-16": "^1.0.3",
    "@types/jest": "^23.3.9",
    "@types/node": "^10.12.2",
    "@types/react": "^16.4.18",
    "@types/react-dom": "^16.0.9",
    "@types/react-router": "^4.4.0",
    "@types/react-router-dom": "^4.3.1",
    "enzyme": "^3.7.0",
    "enzyme-adapter-react-16": "^1.6.0"
  },
  "proxy": "http://localhost:43947"
}

When adding transform or transformIgnorePatterns to package.json like this:

"jest": {
        "transform": {
          "^.+\\.js$": "babel-jest"
      },
        "transformIgnorePatterns": [
          "/node_modules/(?!(@ky)/).*/"
        ]
      },

I get this error:

Out of the box, Create React App only supports overriding these Jest options:

  • collectCoverageFrom
  • coverageReporters
  • coverageThreshold
  • globalSetup
  • globalTeardown
  • resetMocks
  • resetModules
  • snapshotSerializers
  • watchPathIgnorePatterns.

These options in your package.json Jest configuration are not currently supported by Create React App:

  • transform
  • transformIgnorePatterns

If you wish to override other Jest options, you need to eject from the default setup. You can do so by running npm run eject but remember that this is a one-way operation. You may also file an issue with Create React App to discuss supporting more options out of the box.

I also have a babel.config.js which is empty atm:

module.exports = function () {
    const presets = [];
    const plugins = [];

    return {
      presets,
      plugins
    };
  }

Ejecting is not an option. I tryed solving this for + one week. Any help is heavily appreciated.

skyboyer
  • 22,209
  • 7
  • 57
  • 64
DoeJoe
  • 51
  • 4
  • Have you tried the solution provided in this post: https://stackoverflow.com/questions/48957181/jest-with-create-react-app-unexpected-token-errors? – Mitch Nov 30 '18 at 13:02
  • I just tried that solution, but I still get the same error. Allthough I'm pretty sure that it has something to do with the babel/Jest config. – DoeJoe Nov 30 '18 at 15:19

2 Answers2

5

I had a similar problem using material-ui-next-pickers which was using es6 imports in dist/

This is because material-ui-next-pickers isn’t being transpiled before running in Jest. create-react-app excludes everything from ./node_modules.

We could fix this by changing transformIgnorePatterns but it isn't supported by create-react-app as noted in the question.

However, we can still pass it as command arg to react-script test --transformIgnorePatterns \"node_modules/(?!my-module)/\"

Example

  "scripts": {
    "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!material-ui-next-pickers)/\" --env=jsdom",
     ...

  }
Simar Singh
  • 351
  • 4
  • 6
  • this one works for me, but I wonder why do I have to add this flag when running the script, instead of adding the same logic in **jest.config.js**, as is? Could somebody tell me why jest.config.js doesn't work in this scenario? – Code Drop Jul 25 '22 at 13:19
0

add

moduleNameMapper: {
  '^ky$': require.resolve('ky').replace('index.js', 'umd.js'),
},

to your jest.config.js

peter
  • 1,482
  • 4
  • 16
  • 38