Mocha: SyntaxError: Unexpected token import

[Gentlee]

I spent so much time making it work, and it doesn't.

package.json

"scripts": {
    "test": "node_modules/mocha/bin/mocha --require @babel/register"
},
"devDependencies": {
    "@babel/cli": "^7.1.0",
    "@babel/core": "^7.0.1",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/register": "^7.0.0"
    "mocha": "^5.2.0"
}

.babelrc

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

npm test <path to file> says: SyntaxError: Unexpected token import

[Gentlee]

My folder structure is:

project

• client
• 
  
  • test.js
  
  
• 
  
  • package.json
  
  
• 
  
  • node_modules
  
  
• .babelrc
• package.json <-- mocha here
• node_modules

So i'm trying to test file from client folder and it doesn't work. When i test files from root folder everything works. Seems it doesn't search for .babelrc at my root folder, where mocha is actually installed.

It also ignores client's .babelrc with:

{
  "extends": "../.babelrc"
}

Also it works if i rename/delete client's package.json file.

You can assume that client/package.json is empty.

[outsideris]

How did you run mocha under client/?

[Gentlee]

@outsideris exact command is npm test client/src/actions/helpers.test.js

But for my example folder structure it would be npm test client/test.js

[outsideris]

I believe it is bable's issue rather than mocha's.

Under root

$ ./node_modules/.bin/mocha --require @babel/register client/a.test.js
# SyntaxError: Unexpected identifier

Under client/ with client/package.json, However:

$ ../node_modules/.bin/mocha --require @babel/register a.test.js

It works.

[Gentlee]

@outsideris ../node_modules/.bin/mocha --require @babel/register src/actions/helpers.test.js

it doesn't work. SyntaxError: Unexpected token import

[outsideris]

@Gentlee I can't reproduce your case exactly.
But mocha loads correctly @babel/register regardless client/package.json existence. I feel babel behave differently as package.json existence.
Is there a clue that mocha did something wrong?

[Gentlee]

@outsideris at least i would like to know why something doesn't work and don't spend whole day on it. This is usually done by some --debug flag and console output of everything that happens, like

"package.json found at /client"
"warning: .babelrc not found at /client, babel is run without config"

And if you use some library, you should handle its debug info. Thats my opinion.

[plroebuck]

Did you try?

$ NODE_DEBUG="fs" DEBUG="*" node_modules/mocha/bin/mocha --require @babel/register

And if you use some library, you should handle its debug info. Thats my opinion.

We didn't use the library; you did.
Outsider attempted to help you but can't reproduce this.
We're not responsible for babel support, but you might try here or here.

[Gentlee]

@plroebuck thanks for DEBUG="*", it showed the problem.

babel:config:config-chain Ignored '/Users/me/Projects/project/node_modules/mocha/lib/interfaces/common.js' because it failed to match one of [ /^\/Users\/me\/Projects\/project\/client/i ] from '/Users/me/Projects/project/client'

So it searches for .babelrc in nearest folder with package.json. If only i knew about this env variable before...

Of course it would be great if it is mentioned in About Babel or some troubleshooting section, or link to the doc with this section.

[stujo]

@Gentlee Was there a fix / workaround for this based on your findings?

[Gentlee]

@stujo fast workaround as i remember was to rename client/package.json before testing, but currently i don't work on that project.

[plroebuck]

As a side note, it's unnecessary to specify the path to "mocha" within "package.json"; npm will automatically add "node_modules/.bin" to your PATH variable. So write it like this instead.

"package.json"

  "scripts": {
    "test": "mocha --require @babel/register"
  },

[winnieBear]

it is a problem, But it's not a good idea by renaming client/package.json before testing, you
can use link-parent-bin modules, then you can run test file from client folder not in root dir;

[stujo]

I can't quite remember if this was my problem or not, but in case anyone is looking, I might have had the package.json file in the wrong directory (instead of the project root, I might have had it in the test folder) so double check that

[spencerwasden]

I am using ts-node and PHPStorm/Mocha. In the Mocha configuration dialog, there is a field "Extra Mocha options". I entered --require ts-node/register there and it resolved this issue.

[jesonxie]

I use the lower version mocha to solve it. npm i mocha@^7.0.0 -g
and run like this: mocha xxx.js

[JayeshThamke]

I use the lower version mocha to solve it. npm i mocha@^7.0.0 -g
and run like this: mocha xxx.js

@jesonxie It worked for me! What is the root cause?