Webpack: About Jest import problem

[g1eny0ung]

Today, I init my app use vue init vuejs-templates/webpack#develop myApp.

After finish npm i, then I run npm test, the error message is below:

...
SyntaxError: Unexpected token import

So, I add BABEL_ENV=test in "unit": "BABEL_ENV=test jest --config test/unit/jest.conf.js --coverage".

But it doesn't work. And the new error message is:

/Users/g1eny0ung/Work/devo2/src/components/Container.vue:9
    export default {
    ^^^^^^

    SyntaxError: Unexpected token export

I guess this problem is related to vue-jest, and I replace it to jest-vue-preprocessor, in jest.conf.js

transform: {
  '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
  '.*\\.(vue)$': '<rootDir>/node_modules/jest-vue-preprocessor'
},

Then all work fine 😄 . I think maybe this is an unsolved issue in this template?

Hope to get feedback from the repo author.~

[LinusBorg]

1. You are using the develop branch, I hope you are aware that this branch is not to be considered stable.
2. I'm not aware of such an issue. The example component HelloWorld.vue uses ES6 exports / imports as well, and tests run fine.

I would need to see a respository reproducing this.

[g1eny0ung]

I create two repo, one for master and another for develop branch

master
develop

Still occur import error when run npm test

[LinusBorg]

Can't reproduce. This is your develop reproduction:

This is from the Jest docs:

Note: If you are using a more complicated Babel configuration, using Babel's env option, keep in mind that Jest will automatically define NODE_ENV as test. It will not use development section like Babel does by default when no NODE_ENV is set.

So:

• Jest will set NODE_ENV to 'test'
• Babel will set BABEL_ENV = NODE_ENV since we did not define it
• BABEL_ENV === 'test'

=> Tests run fine

You should verify that your shell doesn't have a permanent value set for BABEL_ENV accidentally.

Try running printenv | grep BABEL in your terminal.

[g1eny0ung]

Morning, I confirm it's my env problem and I will try to solve it... I use another laptop and test run fine. Sorry for bothering you and very thanks for you explaining 😺

[g1eny0ung]

I solved it! It's jest cache problem.

I run ./node_modules/.bin/jest --showConfig | grep cache and rm the cache folder and all work fine!

[joemanfoo]

I've ran into this same "issue" on a completely clean install: vue init webpack
And then running npm run unit on windows.
Replacing vue-jest to jest-vue-preprocessor "fixed" the issue

versions:
"vue": "^2.5.2",
"vue-jest": "^1.0.2",

[justin-schroeder]

@joemanfoo Huge help. I also replaced vue-jest with jest-vue-preprocessor and finally got jest to work for me. It's worth noting I also needed to use the babel 7 bridge:

npm install --save-dev "babel-core@^7.0.0-bridge.0"