Jest, Unexpected Token Import

Question

I start a new react project and I wand to use Jest as testing platform. Despite docs, blogs and many others resources like stackoverflow, I have always an "unexpected token import" error related probably to a babel problem, but my conf seem to be ok. Any help is welcomed.

My Jest conf (in package.json). My package.json has dependencies like babel-jest, babel-preset-es2015, babel-preset-react, etc.

 "jest": {
    "testMatch": [
      "**/?(*.)spec.js?(x)"
    ],
    "moduleDirectories": [
      "src",
      "node_modules"
    ],
    "moduleNameMapper": {
      "^lib/(.*)$": "<rootDir>/src/lib/$1",
      "^components/(.*)": "<rootDir>/src/components/$1",
    },
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    }

My .babelrc conf :

{
  "presets": [
    ["es2015", { "modules": false }],
    "react"
  ],
  "plugins": [
    ["react-hot-loader/babel"],
    ["transform-object-rest-spread", { "useBuiltIns": true }],
    ["transform-runtime"]
  ],
  "env": {
      "test": {
        "presets": ["es2015", "react"]
      }
  } 
}

My spec file :

import React from 'react';
import Radio from 'components/ui/radio';
...

And components/ui/radio (import error is raised on the first line) :

import Container from './container.jsx';
...

My webpack has two alias named lib and components (define as moduleNameMapper in jest).

...
resolve: {
   mainFiles: ['index', 'main'],
   extensions: ['.js', '.jsx'],
   alias: {
     lib: helpers.getPath('src/lib/'),
     components: helpers.getPath('src/components/'),
   },
   modules: [
     helpers.getPath('src'),
     helpers.getPath('node_modules'),
   ],
}, 
...

Possible duplicate of [Jest: Test suite failed to run, Unexpected token =](https://stackoverflow.com/questions/47349190/jest-test-suite-failed-to-run-unexpected-token) — Valentin Barit, Jun 18 '18 at 21:31

score 3 · Answer 1 · answered Apr 27 '17 at 16:05

3

I had a very similar issue and at the end I solved it just using --no-cache when running jest.

I also had in my package.json dependencies like babel-jest, babel-preset-es2015, babel-preset-react, etc.

jest --no-cache

answered Apr 27 '17 at 16:05

pearpages

18,703
1
26
27

+1. You might also want to consider simply doing: `npm i babel-preset-env --save-dev` and adding `"env"` to your babel presets list in package.json. Then you can just install whichever presets you need, without having to add them all to the presets list. – Jonathan Oct 08 '17 at 17:57
1

I had this same issue, and `jest --no-cache` didn't fix it, but what /did/ fix it was removing both my node_modules folder and my package-lock.json file and re-running `npm i`. I think this happened because I had a different version of node activated when I had done the original install. (I use nvm to switch.) Check your node version! – Jonathan Oct 08 '17 at 17:59

score 0 · Answer 2 · answered Mar 12 '19 at 23:41

Assuming you've done everything normally suggested and nothing seems to work: Change file extensions from .jsx to just .js. While some libraries/versions in my project were fine with .jsx, others weren't, and it was a nightmare trying to find out who was causing the problem.

You don’t want to have to keep monitoring every update to every file your team touches to check whether it’s adding JSX or removing the last bit of JSX. In practice it’s common to add and remove it from files as your code undergoes changes. You’re going to spend a lot of time either reminding people “hey you should rename this file now” manually or being yelled at by the linter, just because of a tiny code change. And it opens the possibility of both foo.js and foo.jsx existing at the same time - what happens then? - A smart co-worker

If you still want the highlighting and autocomplete your IDE would give you for JSX files, you should be able to make project specific workspace changes. For VSCode it's as simple as:

"files.associations": {
    "*.js": "javascriptreact"
},
"emmet.syntaxProfiles": {
    "javascript": "jsx"
}

score 0 · Answer 3 · answered Jun 28 '19 at 07:01

0

If you are facing this issue after updating to a newer Jest version, try clearing internal cache of Jest:

jest --clearCache

answered Jun 28 '19 at 07:01

Ayan

8,192
4
46
51

Jest, Unexpected Token Import

3 Answers3