Vue-test-utils: Jest encountered an unexpected token when using with vue-test-utils

[adamchenwei]

Version

1.0.0-beta.25

Reproduction link

https://github.com/adamchenwei/vuejs-playground/tree/step/3-3-1-testing-with-jest

Steps to reproduce

go to https://github.com/adamchenwei/vuejs-playground/tree/step/3-3-1-testing-with-jest
git clone && npm install
git checkout step/3-3-1-testing-with-jest
npm run test

What is expected?

no error, test pass

What is actually happening?

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:

/Users/achenwei/www/lab/vuejs-playground/src/__tests__/App.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { mount, createLocalVue } from '@vue/test-utils';
                                                                                                ^

SyntaxError: Unexpected token {

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

---

its happening in all the playground repo I make to setup jest with vue-test-utils.

[eddyerburgh]

This is an issue with your Jest setup.

Jest can't handle non-JS imports, like .css files, by default. You need to add a transformer to handle the extension:

npm i --save-dev jest-transform-stub

"jest": {
  "transform": {
    ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
  }
}

[adamchenwei]

@eddyerburgh I would really appreciate if the ticket can be closed after reply, I understand your time is valuable and I am trying best not to spend your time in meaningless rant 👍
But yes, I applied the change, still the same, but it seems more deal with vue-test-utils is because I saw its crying import problem:

Details:

    /Users/achenwei/www/lab/vuejs-playground/src/__tests__/App.spec.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { mount, createLocalVue } from '@vue/test-utils';

Would you take a second look? I applied change you suggested code addition, still the same...

Thank you so much!

[eddyerburgh]

Sorry, I should have read your initial message more thoroughly, I looked at your source code without checking the error.

This is an issue with the babel setup. import is not being compiled to common JS, so Jest throws an error. You need to compile modules with babel when running Jest.

(It seems you solved this issue yourself?)

[adamchenwei]

@eddyerburgh thanks, I pursued as much as I can, but its right now more of a babel issue still but more related to import of storyshot right now, import kinda works.... Would you able to take a look? I know it may not exactly relevant at all to vue-test-utils right now.
same repo but branch of tep/3-3-2-B-storybook-storyshot-broken
Thanks
But if you'd rather differ, just let me know

[adamchenwei]

whoever jump into this issue, ~just be warn that vue-test-utils won't work with jest atm~ just not working with it properly without tweaking setup, try all the solutions here to see if work, if not, I made a vue boilerplate without it, and go with storybook snapshot approach works at least. Until they fix it, cheers!
https://github.com/adamchenwei/vuejs-storybook-storyshot-jest-webpack-boilerplate

[kevinluo201]

check https://jestjs.io/docs/en/webpack

// package.json
{
  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
    }
  }
}

then add the refering files respectively:

// __mocks__/styleMock.js

module.exports = {};

// __mocks__/fileMock.js

module.exports = 'test-file-stub';

[aze3ma]

I have the same error throws also, I just tried to change this line
from =>

    "^.+\\.jsx?$": "babel-jest"

to =>

    "^.+\\.(js|jsx)?$": "babel-jest"

just added .js extension to babel-jest it works.

[slushnys]

"^.+\.(js|jsx)?$": "babel-jest"

Followed the steps to add jest to vue-cli 3 with its plugin for jest, however i can't seem to run my environment with this or any other setup as well for some reason. Works when I create a new vue project through cli-3 tho 🤷‍♂

[peerhenry]

I had the same problem with a vanilla project using Vue cli 3.8.4. I was able to fix it by changing

"^.+\\.jsx?$": "babel-jest"

to

'^.+\\.jsx?$': '<rootDir>/node_modules/babel-jest',

Credits go to Samuel Pouyt's article on medium.

Side note: the jest config is not missing the instruction for .js files: the regex says .jsx?. The question mark indicates zero or one occurrences on the x, which means it matches both .js and .jsx files.

[ghenry]

This isn't helping me. I've got the exact same set up as a brand new vue-cli 3 project.

[jbibla]

@aze3ma's solution worked for me.

@peerhenry — makes sense but somehow didn't solve the issue for us.

Thank you all for your comments!

[RichieChoo]

Junk experience in vue cli3 unit test with jest.
1.Add jest config by vue add unit-jest
2.modified sth and run npm run test:unit and passed.
3.How to debugger with npm run test:unit
4.use vscode jest debugger (vscode-jest-tests） still throw SyntaxError: Unexpected token import
and All solutions above I tried But not work
5.
This link contains Little details
6.https://github.com/vuejs/vue-test-utils-jest-example IS DEPRECATED

7.Why Vue unit test cannot be simple just like react.
8.I'm tired

[MuhaddiMu]

Try Vue Scaffolding with Nuxt. It comes with optional Jest & AVA Test configuration with single click and it works totally fine from the beginning without manually configuring it

[SunXinFei]

npm i --save-dev identity-obj-proxy
jest.config.js

module.exports = {
  preset: "@vue/cli-plugin-unit-jest",
  moduleNameMapper: {
    '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
  },
};