Babel + Jest Configuration

Question

The Problem:

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:

path\setupTests.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { configure } from 'enzyme';
                                                                                                ^

SyntaxError: Unexpected token {

  at ScriptTransformer._transformAndBuildScript (../node_modules/jest-runtime/build/script_transformer.js:403:17)

Here's my setup:

package.json

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.3",
    "babel-jest": "^23.6.0",
    "babel-loader": "7.1.4",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "6",
    "babel-runtime": "6",
    "css-loader": "0.28.11",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "enzyme-to-json": "^3.3.5",
    "jest": "^23.2.0",
 "jest-enzyme": "^6.0.2",
}

.babelrc

{
  "presets": [ [
    "env", {
      "targets": {
        "node": "current"
      }
    }
  ], "react"],
  "plugins": [
    [
      "react-css-modules",
      {
        "filetypes": {
          ".scss": {
            "syntax": "postcss-scss"
          }
        },
        "webpackHotModuleReloading": true
      }
    ],
    ["transform-class-properties", { "spec": true }],
    ["transform-object-rest-spread"],
    ["emotion"]
  ],
  "env": {
    "test": {
      "presets": [
        "jest",
        "react",
        [
          "env",
          {
            "debug": false,
            "modules": "commonjs",
            "targets": {
              "node": "current"
            },
            "useBuiltIns": true
          }
        ]
      ],
      "plugins": [
        "transform-es2015-modules-commonjs",
        [
          "react-css-modules",
          {
            "generateScopedName": "[local]",
            "filetypes": {
                  ".scss": {
                      "syntax": "postcss-scss",
                      "plugins": [
                          "postcss-nested"
                      ]
                  }
              }
          }
        ]
      ]
    }
  }
}

jest.config.js

module.exports = {
  rootDir: 'client',
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
    '\\.(scss)$': 'identity-obj-proxy',
    '<rootDir>/config.js': '<rootDir>/__mocks__/config.js'
  },
  setupFiles: ['<rootDir>/setupTests.js'],
  setupTestFrameworkScriptFile: '../node_modules/jest-enzyme/lib/index.js',
  transform: {}
};

I have read through:

https://jestjs.io/docs/en/getting-started.html#using-babel https://github.com/facebook/jest/issues/5164#issuecomment-366139663 Configuring Babel and Jest Jest es6 modules: unexpected module import How to use babel-preset-env with Jest https://github.com/facebook/jest/issues/1654

I am using Yarn 1.9.1 . I have removed and reinstalled my dependencies.

and I am still beyond lost.

Answer 1

You are still on Babel 6 - I would recommend reading the Babel 7 upgrade documentation https://babeljs.io/docs/en/v7-migration

Quite a lot has changed, especially in the area of presets, which has now been simplified.

There is a tool to help you get started here: https://github.com/babel/babel-upgrade - this will look at your package.json and upgrade most of your babel includes and presets automatically.

It is worth reading the upgrade guide and following it. You will likely find the cause of your problem along the way, and be confident that your setup is correct.

Answer 2

I am sharing my working babelrc and package.json file. You can debug on the top of it to find where your setup is messing up.

babel.rc

 {
  "presets": [
    [
      "@babel/preset-env",
      {
        "debug": false,
        "targets": {
          "browsers": ["last 3 versions"]
        }
      }
    ]
  ]
}

Package.JSON

{
  "name": "babelWithJest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "npm": "^6.4.1"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-beta.54",
    "@babel/preset-env": "^7.0.0-beta.54",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^23.4.0",
    "bili": "^3.1.2",
    "jest": "^23.4.1",
    "regenerator-runtime": "^0.12.0"
  }
}