Jest encountered an unexpected token in a ReactJS application

Question

I am getting a Jest error when testing :-

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.

This is the file that is causing the problem:-

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Layout from '../index';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<Layout />, div);
  ReactDOM.unmountComponentAtNode(div);
});

I tried to do some research online however I think I have something wrong with my config files.

So I have the package.json:-

{
"name": "tasks.edit",
"version": "0.1.0",
"private": true,
"homepage": "./",
"author": "Development Team",
"scripts": {
    "build": "npm run build-css && react-scripts-ts build && npm run postbuild",
    "build-css": "node-sass src/styles/sass/ -o src/styles/css/",
    "eject": "react-scripts-ts eject",
    "postbuild": "rimraf build/**/*.map",
    "start": "npm-run-all -p watch-css start-js test:watch",
    "start-js": "react-scripts-ts start",
    "test": "jest",
    "test:coverage": "jest --coverage",
    "test:default": "react-scripts-ts test --env=jsdom",
    "test:watch": "jest --watchAll -u",
    "watch-css": "npm run build-css && node-sass src/styles/sass/ -o src/styles/css/ --watch --recursive",
    "debug": "node --debug-brk --inspect ./node_modules/.bin/jest -i"
},
"dependencies": {
    "@babel/core": "^7.11.5",
    "babel-core": "^6.26.3",
    "ckeditor4-react": "0.1.0",
    "email-validator": "2.0.4",
    "jest": "^26.4.2",
    "node-sass": "4.11.0",
    "react-joyride": "2.0.3",
    "react-redux": "6.0.0",
    "redux": "4.0.1"
},
"devDependencies": {
    "@babel/preset-react": "^7.10.4",
    "@types/react-joyride": "2.0.1",
    "@types/react-redux": "7.0.0",
    "@types/redux-logger": "3.0.6",
    "@types/redux-mock-store": "1.0.0",
    "babel-jest": "^26.3.0",
    "redux-logger": "3.0.6",
    "redux-mock-store": "1.5.3",
    "redux-thunk": "2.3.0",
    "regenerator-runtime": "^0.13.7"
},
"jest": {
    "testMatch": [
        "**/__tests__/**/*.[jt]s?(x)",
        "**/?(*.)+(spec|test).[jt]s?(x)"
    ],
    "moduleFileExtensions": [
        "js",
        "jsx",
        "json"
    ]
}

}

This is the jest.congig.js

module.exports = {
"name": "Tasks.Edit",
// Setup Jest
"roots": [
    "<rootDir>/src"
],
"testEnvironment": "node",
"transformIgnorePatterns": ["/node_modules/"],
// transformIgnorePatterns: [`/node_modules/(?!${esModules})`],
"transform": {
    "^.+\\.tsx?$": "ts-jest",
    "^.+\\.(js|jsx|mjs)?$": "babel-jest" 
},
"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
"moduleNameMapper": {
    'office-ui-fabric-react/lib/(.*)$': 'office-ui-fabric-react/lib-commonjs/$1'
},
"moduleFileExtensions": [
    "ts",
    "tsx",
    "js",
    "jsx",
    "json",
    "node"
],
"globals": {
    "window": {}
},
// Setup Enzyme
"snapshotSerializers": ["enzyme-to-json/serializer"],
"setupTestFrameworkScriptFile": "<rootDir>/src/setupEnzyme.ts",

}

and this is my .babelrc

{
"presets": [
    [
      "@babel/preset-react"
    ]
  ]

}

Is this configuration correct? Am I missing something?

Thanks for your help and time!

Answer 1

Most probably when updating package dependency, "babel-core" dependency may have been updated to 6.xx.x, it should be "7.0.0-bridge.0" for jest to work.

Reference: https://github.com/vuejs/vue-cli/issues/1879#issuecomment-412300256 https://github.com/vuejs/vue-cli/issues/1879#issuecomment-435194932

Answer 2

I have managed to get rid of the Jest error by editing the .babelrc file:-

{
  "presets": [
      "@babel/react" , 
      "@babel/env" 
  ],
  "plugins": [
      "@babel/plugin-proposal-class-properties"
  ]
}