Processing vue files from node_modules

[zombor]

Hi, I'm having some trouble with processing vue files from npm package dependencies. Am I doing something wrong?

My current package.json config:

"jest": {
  "moduleFileExtensions": [ "js", "vue" ],
  "moduleNameMapper": {
    "^@(.*)$": "<rootDir>/src$1"
  },
  "testRegex": "jest\/.*",
  "transform": {
    "^.+\\.js$": "babel-jest",
    "^.+\\.vue$": "jest-vue-preprocessor"
  }
}

In my test, I have an import like this:

import Octicon from 'vue-octicon/components/Octicon.vue';
import 'vue-octicon/icons/x';
Vue.component('octicon', Octicon);

And when I run my tests, it complains about:

node_modules/vue-octicon/components/Octicon.vue:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<template>
                                                                                             ^
    SyntaxError: Unexpected token <
      
      at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12)
      at Object.<anonymous> (test/jest/components/CartRow.test.js:3:16)

[vire]

I'll try to dig into it today/tomorrow. Looks like there's an issue with the jest config... Can you post here a verbose example of your --debug ?

[zombor]

Yep, here you go.

> jest --debug

jest version = 19.0.2
test framework = jasmine2
config = {
  "automock": false,
  "bail": false,
  "browser": false,
  "cacheDirectory": "/tmp/jest",
  "clearMocks": false,
  "coveragePathIgnorePatterns": [
    "/node_modules/"
  ],
  "coverageReporters": [
    "json",
    "text",
    "lcov",
    "clover"
  ],
  "expand": false,
  "globals": {},
  "haste": {
    "providesModuleNodeModules": []
  },
  "moduleDirectories": [
    "node_modules"
  ],
  "moduleFileExtensions": [
    "js",
    "vue"
  ],
  "moduleNameMapper": [
    [
      "^@(.*)$",
      "/home/jeremybush/code/card-rocket-web/src$1"
    ]
  ],
  "modulePathIgnorePatterns": [],
  "noStackTrace": false,
  "notify": false,
  "preset": null,
  "resetMocks": false,
  "resetModules": false,
  "roots": [
    "/home/jeremybush/code/card-rocket-web"
  ],
  "snapshotSerializers": [],
  "testEnvironment": "jest-environment-jsdom",
  "testMatch": [],
  "testPathIgnorePatterns": [
    "/node_modules/"
  ],
  "testRegex": "jest/.*",
  "testResultsProcessor": null,
  "testURL": "about:blank",
  "timers": "real",
  "transformIgnorePatterns": [
    "/node_modules/"
  ],
  "useStderr": false,
  "verbose": null,
  "watch": false,
  "transform": [
    [
      "^.+\\.js$",
      "/home/jeremybush/code/card-rocket-web/node_modules/babel-jest/build/index.js"
    ],
    [
      "^.+\\.vue$",
      "/home/jeremybush/code/card-rocket-web/node_modules/jest-vue-preprocessor/index.js"
    ]
  ],
  "rootDir": "/home/jeremybush/code/card-rocket-web",
  "name": "2f6d8b20a2ee813721c618fac7abced7",
  "setupFiles": [],
  "testRunner": "/home/jeremybush/code/card-rocket-web/node_modules/jest-jasmine2/build/index.js",
  "cache": true,
  "watchman": true
}

[vire]

@zombor Still working on that had no chance to get to fix this yet, but I was experimenting and was able to reproduce the bug. It might be related to the "transform" config...

I need to debug jest-cli/build/transform to get more details :/

[zombor]

Cool, thanks for the heads up. With vue-octicon, there's some webpack config needed, I wonder if it's a similar thing with this:

https://github.com/Justineo/vue-octicon#es-modules-with-npm--vue-loader-recommended

[kevinongko]

Any update on this issue? also having the same problem.

[zombor]

I've ended up just moving away from vue-octicon, so unfortunately I don't have a good answer.

[kevinongko]

@zombor any luck on importing other node_modules .vue component?

[subutux]

I had the same problem with two node modules. I fixed it by using transformIgnorePatterns, what is default set to node_modules

Here is part of my jest config:

"moduleFileExtensions": [
      "vue",
      "js"
    ],
    "moduleNameMapper": {
      "^vue$": "vue/dist/vue.common.js",
      "^@(.*)": "<rootDir>/src/$1",
      ".*\\.(less|css)$": "babel-jest"
    },
    "transform": {
      ".*\\.vue$": "<rootDir>/node_modules/jest-vue-preprocessor",
      ".*\\.js$": "<rootDir>/node_modules/babel-jest"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!vue-awesome|vue-quill-editor)"
    ]

So to clarify what that regex exacly does:

Don't transform files who has node_modules in their path, except from vue-awesome and vue-quill-editor, those you can use the transform functions for.

[dmouroutis]

I have found a similar issue (resolved) on another jest implementation for react slingshot.

coryhouse/react-slingshot#456

[juliuslu-tencent]

I have an example about vue-clap-button. In my vue project's .babelrc, I added the settings as below:
"env": {
"test": {
"presets": ["env","stage-2","es2015", "jest"],
"plugins": ["transform-es2015-modules-commonjs", "dynamic-import-node"]
}
}

Then, I want to use vue-clap- button in my jest script. I also repeated the upper settings in node_modules/vue-clap-button's .babelrc file. And it 's ok to run jest test.