4

I'm writing tests for a React application and run into an issue while compiling classes that i import in my test files. When running the test suite 

i get the following error:
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:

/node_modules/react-redux/es/connect/connect.js:5
import connectAdvanced from '../components/connectAdvanced';
^^^^^^

I have tried to use babel-jest to transpile using the transform property and the modulePathIgnorePatterns. My jest.config.json looks like:

{
  "moduleNameMapper": {
    ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
  },
  "setupFiles": [
    "raf/polyfill",
    "<rootDir>/test/testSetup.js"
  ],
  "transform": {
    "^.+\\.jsx?$": "babel-jest"
  }
}

my babel.rc file (its in the root directory)

{
    "presets": [ "react", "es2015", "stage-2" ],
    "plugins": [
        "transform-class-properties",
        "transform-object-rest-spread",
    ]
}

I have the following packages in my package.json:

 "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.1",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "enzyme": "^3.6.0",
    "enzyme-adapter-react-16": "^1.5.0",
    "eslint": "^5.3.0",
    "eslint-plugin-react": "^7.10.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^23.5.0",
    "babel-jest": "^23.6.0"
    "mkdirp": "^0.5.1",
    "prettier": "^1.13.7",
    "prettier-eslint": "^8.8.2",
    "prop-types": "^15.6.0",
    "react-test-renderer": "^16.5.0",
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5",
    "webpack-merge": "^4.1.4",
    "yargs": "^12.0.1"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "babel-polyfill": "^6.26.0",
    "css-loader": "^1.0.0",
    "eventing-bus": "^1.3.3",
    "filesize": "^3.6.1",
    "i18next": "^11.5",
    "node-sass": "^4.8.3",
    "react": "^16.4",
    "react-circular-progressbar": "^1.0.0",
    "react-dom": "^16.4",
    "react-redux": "^5.0",
    "react-truncate": "^2.4.0",
    "redux": "^4.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.22.1"
  }

Who knows how i can modify my jest.config or .babelrc file so that my tests will compile without problem? Thanks in advance.

Mitch
  • 715
  • 4
  • 12
  • 28
  • You might want to read trough my previous answer to an related issue https://stackoverflow.com/questions/49263429/jest-gives-an-error-syntaxerror-unexpected-token-export/49679658#49679658 – Jimi Pajala Sep 11 '18 at 07:42

1 Answers1

4

Your problem is: js files from /node_modules are not compiled by default.

It is totaly fine when you run your code in browser (that is exactly why such modules are not compiled because you have no need for that).

But jest runs using Node which doesn't understand import syntax. The best solution is to enable babel transpilation of node_modules when you run tests.

{"env": {
    "development": {
        "plugins": ["transform-es2015-modules-commonjs"]
    },
    "test": {
        "plugins": ["transform-es2015-modules-commonjs"]
    }
}}

Also use --no-cache when runing jest while fixing such problems.

Philipp Meissner
  • 5,273
  • 5
  • 34
  • 59
Arseniy-II
  • 8,323
  • 5
  • 24
  • 49
  • Thanks for your answer. However i don't understand how i can make the difference between the test environment and the development environment. Adding the lines provided in your link to `.babelrc` and installing `transform-es2015-modules-commonjs` doesn't seem to do the job. However when i add `"transformIgnorePatterns": ["/node_modules/(?!react-redux)"]` the error is gone for react-redux but will apear for an import in `lodash-es`. Can you explain what you mean in more detail? – Mitch Sep 11 '18 at 07:32
  • Can you give me an lodash-es error message? I mean that you can customize babel behavior depends on process.env.NODE_ENV variable. Jest by default set it as 'test' – Arseniy-II Sep 11 '18 at 07:37
  • 1
    Same as the error message provided in the answer above, only now for lodash-es: `node_modules/lodash-es/isPlainObject.js:1 ({"Object.":function(module,exports,require,__dirname,__filename,global,jest){import baseGetTag from './_baseGetTag.js'; ^^^^^^ SyntaxError: Unexpected token import` – Mitch Sep 11 '18 at 07:41
  • So essentially its still about the import: `import baseGetTag from './_baseGetTag.js'; ^^^^^^ SyntaxError: Unexpected token import` – Mitch Sep 11 '18 at 07:42
  • Yes here the same, you have enabled transpolation only for `react-redux` now it stuck on `lodash-es` add it to `transformIgnorePatterns` so it can be also traspiled too. It may occur a few more times but eventually you will transpile all modules which need transpilation. – Arseniy-II Sep 11 '18 at 07:45
  • `"transformIgnorePatterns": ["/node_modules/(?!react-redux|lodash-es)"]` adding both `lodash-es` and `react-redux` still gives me the same lodash-es import error described above :( – Mitch Sep 11 '18 at 07:48
  • Also I suggest you to add `"transformIgnorePatterns"` only for `test` environment, in order to avoid transpilation in development builds because is is unnecessary. – Arseniy-II Sep 11 '18 at 07:49
  • try `"transformIgnorePatterns": ["/node_modules/"]` – Arseniy-II Sep 11 '18 at 07:51
  • Adding `"transformIgnorePatterns": ["/node_modules/"]` gives me the import error in `react-redux` again. I added ` in front of it and still not luck :( – Mitch Sep 11 '18 at 07:54
  • Ok I have only one thing to add then. Try run jest with `--no-cache` flag – Arseniy-II Sep 11 '18 at 08:03