Problem getting jest to work with vue and webpack

[rms6458]

trafficstars

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[x ] support request

Current behavior

I npm installed the jest-vue-preprocessor package and the jest snapshot test runs properly on the vue framework; however, the application itself doesn't run. The app uses webpack.

If I change the babelrc presets configuration to {"modules": false}, the app runs properly, but the tests fail with the error SyntaxError: Unexpected token import.

With the babelrc presets configuration to {"modules": "commonjs"}, the tests run, but the app doesn't.

Expected behavior

I should be able to run the tests as well as the app itself.

Minimal reproduction of the problem with instructions I run the command NODE_ENV=test jest --no-cache Here is the "jest" section of my package.json:

"jest": {
    "moduleFileExtensions": [
      "js", "vue"
    ],
    "moduleNameMapper": {
      "src/components/(.*)$": "<rootDir>/src/components/$1.vue",
      "^vue$": "vue/dist/vue.common.js",
      "src": "<rootDir>/src",
      "assets": "<rootDir>/src/assets",
      "components": "<rootDir>/src/components"
    },
    "testMatch": [
      "**/test/snapshot/*.spec.js"
    ],
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor"
    },
    "transformIgnorePatterns": ["/node_modules/"]
  }

I'm running jest with --no-cache option.

Here's the babelrc file:

{
  "presets": [
    ["env", { "modules": "commonjs" }],
    "stage-2"
  ],
  "plugins": ["transform-runtime"],
  "comments": false,
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": [ "istanbul" ]
    }
  }
}

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

Atom editor, webpack package manager

• jest-vue-preprocessor: 1.1.X

jest-vue-preprocessor 1.0.1

• Node version : [ OSX | Linux | Windows ] Windows 7

• Platform: [ OSX | Linux | Windows ] Windows 7

[rms6458]

I'm using webpack 2.7.0

[rms6458]

Github repo: https://github.com/rms6458/jest-vue-webpack-repo.git

[vire]

I'll take a look during the weekend,

[rms6458]

Did you get a chance to look into this issue?

[vire]

Hey, I only checked the problem, had no chance to come with a solution, but have you considered to leverage babel config for webpack and using .babelrc ?

[LarryEitel]

FYI, I just installed vanilla install on Windows per this guide: Unit Testing Vue.js Components with the Official Vue Testing Tools and Jest.

> [email protected] test C:\_dk\_xchg\home\src\test
> jest "Phones.test.js"

[Vue warn]: Vue is a constructor and should be called with the `new` keyword
Failed to compile scr with `babel` at `vue-preprocessor`
FAIL unit\common\Phones.test.js
  ● Test suite failed to run

    TypeError: Jest: a transform's `process` function must return a string, or an object with `code` key containing this string.

      at ScriptTransformer.transformSource (node_modules/jest-runtime/build/script_transformer.js:227:15)
      at Object.<anonymous> (unit/common/Phones.test.js:2:13)

  console.info ..\..\node_modules\vue\dist\vue.common.js:8248
    You are running Vue in development mode.
    Make sure to turn on production mode when deploying for production.
    See more tips at https://vuejs.org/guide/deployment.html

This may not add any value to this issue other than to rattle someone's cage. :)

Looking forward to making this work. :)