Vue-cli: Jest tests won't work without babel

[Mourdraug]

Version

3.0.0-rc.10

Node and OS info

Node 10.7.0 / npm 6.3.0-next.0 / Windows 10

Steps to reproduce

1. Create new project with only Jest plugin selected
2. Run npm run test:unit

What is expected?

 PASS  tests/unit/HelloWorld.spec.js
  HelloWorld.vue
    √ renders props.msg when passed (22ms)

What is actually happening?

 FAIL  tests/unit/HelloWorld.spec.js
  ● Test suite failed to run

    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".
    Details:

    C:\node_workspace\test\tests\unit\HelloWorld.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { shallowMount } from '@vue/test-utils';
                                                                                                ^

    SyntaxError: Unexpected token {

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

---

It works as expected if I install both Babel and Jest.

[LinusBorg]

Jest is running tests in node, which doesn't support ES Modules, which would explain this.

To make this work we would change both the test files and component files to export commonjs when this coption combination is chosen. jest would also break when using import(), for example, since that's not implemented in node yet, either.

So I feel like using jest wihtout babel has a quite limited use case... nozt sure what's the best solution.

[Mourdraug]

My motivation for opting out babel is actually quite simple. I'd like to use ES6 without transpiling code to ES5 I don't really use babel tho, so I'm not sure if it's possible to configure it to handle imports and leave rest as is.

[LinusBorg]

hm, that would require to teach node how to deal with ES Modules. And that's possible, but not something we would like to include as a default I think.

That solution would be the esm package

You would have to create a setup file for jest, in which you do this:

// ./tests/unit/setup.js
require = require("esm")(module)

and then add this file to your jest config

 // ...
  setupFiles: [
    path.join (__dirname, './tests/unit/setup.js')
  ]
// ...

[Mourdraug]

I'm not really convinced that problem lies in node not being able to deal with ES6 import.

jestPlugin.spec.js specifies that jest should be working without babel plugin.

Also I get Unexpected token { not Unexpected token import, which I'd expect in such case.

Shouldn't jest plugin still use babel internally, even without babel plugin?

Also I tested esm solution but I keep getting the same error.

[yyx990803]

When you create a project with jest only, Vue CLI still installs babel-jest with transform-es2015-modules-commonjs configured. I cannot reproduce the error. If that's not working as intended, please provide an actual reproduction.

[Mourdraug]

Just confirming that with .babelrc instead of babel.config.js tests run as expected. 99761b350d37f4546bb2851fbe6f1b7e831f1b2a should fix this issue.

[ianchanning]

Many thanks @Mourdraug!

This finally solved my Jest + ES6 without babel problems (for an unrelated project), I'll add my simplified solution to this.

I eventually understood by staring at commit 65d5d36d from the jestPlugin.spec.js, this adds the babel and a babel plugin as dependencies, not as devDependencies.

I have a completely unrelated project. But as is pointed out here Jest uses node so Jest needs to use babel even if your project doesn't. So for a project which hasn't installed babel yet, you still need to install babel, but as a regular dependency:

npm install babel-jest babel-plugin-transform-es2015-modules-commonjs

Then I modified my package.json to include:

  "babel": {
    "plugins": ["transform-es2015-modules-commonjs"]
  },

Now npm test runs without the import error. Here I don't need a .babelrc file.

[Lynaj]

Many thanks @Mourdraug!

This finally solved my Jest + ES6 without babel problems (for an unrelated project), I'll add my simplified solution to this.

I eventually understood by staring at commit 65d5d36d from the jestPlugin.spec.js, this adds the babel and a babel plugin as _dependencies_, not as _devDependencies_.

I have a completely unrelated project. But as is pointed out here Jest uses node so Jest needs to use babel even if your project doesn't. So for a project which hasn't installed babel yet, you still need to install babel, but as a regular dependency:

npm install babel-jest babel-plugin-transform-es2015-modules-commonjs

Then I modified my package.json to include:

  "babel": {
    "plugins": ["transform-es2015-modules-commonjs"]
  },

Now npm test runs without the import error. Here I don't need a .babelrc file.

You really just saved my day!

[Akryum]

npm install babel-jest babel-plugin-transform-es2015-modules-commonjs

This is unnecessary since those packages are dependencies of @vue/cli-plugin-unit-jest

[abhidp]

Many thanks @Mourdraug!

This finally solved my Jest + ES6 without babel problems (for an unrelated project), I'll add my simplified solution to this.

I eventually understood by staring at commit 65d5d36d from the jestPlugin.spec.js, this adds the babel and a babel plugin as _dependencies_, not as _devDependencies_.

I have a completely unrelated project. But as is pointed out here Jest uses node so Jest needs to use babel even if your project doesn't. So for a project which hasn't installed babel yet, you still need to install babel, but as a regular dependency:

npm install babel-jest babel-plugin-transform-es2015-modules-commonjs

Then I modified my package.json to include:

  "babel": {
    "plugins": ["transform-es2015-modules-commonjs"]
  },

Now npm test runs without the import error. Here I don't need a .babelrc file.

fantastic.... works wonders !!