Vue-cli: Jest tests fail to run from project created through vue-cli

[brandonaaskov]

Version

3.0.0-beta.11

Reproduction link

https://cl.ly/rsUF

Steps to reproduce

Following the guide here: https://vuejs-templates.github.io/webpack/
Select the following options during setup config:

• Vue Build: Runtime Compiler
• Install vue-router? No
• Use ESLint to lint your code? Yes
• Pick an ESLint preset: Standard
• Set up unit tests: Yes
• Pick a test runner: jest
• Setup e2e tests with Nightwatch? No
• Should we run npm install for you after the project has been created? yarn

What is expected?

The HelloWorld.spec.js test will run and pass.

What is actually happening?

Test suite failed to run

my-path/my-project/test/unit/setup.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Vue from 'vue';
                                                                                         ^^^^^^

SyntaxError: Unexpected token import

[yyx990803]

Cannot reproduce. Also, a screen recording is not a reproduction. Finally, the 2.x webpack template has its own repository: https://github.com/vuejs-templates/webpack

[brandonaaskov]

@yyx990803 I think this boils down to a noob mistake of using @vue/[email protected] but that template was built with [email protected] in mind. Even the setup wizard is different, and that should have been an obvious sign to me but wasn't at the time.

[judgeyboy]

@brandonaaskov I know this issue is closed, but I'm getting a similar error message when running either jest or npm run test:unit - did you manage to find a work around? Funny enough, the only work around I have - if you can even call it a work around - is to reboot my mac 😃... after a reboot it usually works for a while and then I get the same error again. I know this sounds fishy, but if anybody else has this issue, please let me know as this is a bit of a pain in the "you know where"

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

/.../tests/unit/stats.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import "core-js/modules/es6.promise";

Any help is greatly appreciated.

Using 3.0.0-beta.15

[kalekseev]

@judgeyboy use npm run test because vue-cli-service adds extra config to jest, most probably you run jest got an error and then tried npm run test in this case second run will use cache from jest so to fix this problem without reboot do jest --clearCache and then npm run test. (spent quite a time to figure out that jest cache problem)

[brandonaaskov]

@judgeyboy I'm getting basically the same problem when I run tests as well. It seems like it's something with the webpack template, so I opened an issue there: https://github.com/vuejs-templates/webpack/issues/1404

I haven't had time to dig into it yet, but at least there's an issue open for now.

[winstonjz]

Having this issue as well. Have tried clearing cache and changing babel configs. I'm using mocha/chai and it works. @brandonaaskov

[mrodal]

Is there some update on this? I am getting

({"Object.":function(module,exports,require,__dirname,__filename,global,jest){import { shallowMount } from '@vue/test-utils';

SyntaxError: Unexpected token {

[mrodal]

Ok, I found that problem, the IDE was compiling the ts to js, and the js file was failing.

But now I get this error on the ts file:
Cannot find module 'vue-property-decorator' from 'HelloWorld.vue'

  33 | 
  34 | <script lang="ts">
> 35 | import { Component, Prop, Vue } from 'vue-property-decorator';
     | ^
  36 | 
  37 | @Component
  38 | export default class HelloWorld extends Vue {

  at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:221:17)
  at src/components/HelloWorld.vue:35:1
  at Object.<anonymous> (src/components/HelloWorld.vue:43:3)

Reproduction for this error is:

1. Creating a project with these options:
2. Use ESLint to lint your code? Yes
3. Pick an ESLint preset: Standard
4. Set up unit tests: Yes
5. Pick a test runner: jest
6. Use Typescript: Yes
7. Use Babel: Yes
8. npm run test:unit

[rgalaxy]

Is there any possibilities this is fixable? it ried to clearCache but it still not working. do i need to add something on my babelrc? i havent touch anything about test and when i tried to create a test on my service and run it, it show this error. i tried to install this and that but it just introduce another series of chaining errors. this is the error when i run test
`
FAIL /__tests__/myService.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".

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:

C:\*\*\*\*\*\myService.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import "core-js/modules/es6.array.iterator";
                                                                                         ^^^^^^

SyntaxError: Unexpected token import

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

`