Source maps missing

[TheCycoONE]

On my .vue templates the source map appears to be missing; breakpoints do not work in IntelliJ or vscode, and in Chrome's debugger the processed source code is shown instead of the original.

On my .js templates, processed by babel-jest everything works as expected in the IDEs and Chrome debugger.

At the end of my files processed by babel-jest I have a base64 encoded source map embedded in the file e.g.:

//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2Z ... snip ... gICAgICAgICB==
}});

No source map appears in my processed .vue files

var defaultExport = (module.exports.__esModule) ? module.exports.default : module.exports;var __vue__options__ = (typeof defaultExport === "function"? defaultExport.options: defaultExport)
__vue__options__.render = function render () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',{staticClass:"minitext",attrs:{"id":_vm.id},domProps:{"innerHTML":_vm._s(_vm.counterHtmlInternal)}},[_vm._v(_vm._s(_vm.counterHtmlInternal))])}
__vue__options__.staticRenderFns = []

}});

My jest configuration (from package.json):

  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1",
      "^@legacy/(.*)$": "<rootDir>/../main/webapp/includes/js/$1",
      "^@legacy2/(.*)$": "<rootDir>/../main/webapp/js/$1",
      "^raveGlobal$": "<rootDir>/src/js/commons/raveGlobal",
      "vue$": "vue/dist/vue.js"
    },
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
    },
    "testPathIgnorePatterns": [
      "<rootDir>/test/e2e",
      "src/test.js"
    ],
    "snapshotSerializers": [
      "<rootDir>/node_modules/jest-serializer-vue"
    ],
    "setupFiles": [
      "<rootDir>/test/jest/setup"
    ],
    "coverageDirectory": "<rootDir>/test/jest/coverage",
    "collectCoverageFrom": [
      "src/**/*.{js,vue}",
      "!src/main.js",
      "!**/node_modules/**"
    ],
    "testResultsProcessor": "jest-teamcity-reporter"
  }

jest: v22.4.4
vue-jest: 2.6.0
source-map: 0.5.7

[aldarund]

Is it really bug in vue-jest? I tried to debug a bit and found that vue-jest process function generate and return map object to the jest itself. And jest create a map file in temp folder like this temp\jest\jest-transform-cache-aeed2fdb8d874223d633677bd2030000-eb1806becba3a17708d164f9003ab9fe\f4\

But debugger still dont work e.g. -> https://youtrack.jetbrains.com/issue/WEB-33399 but it might be up to ide to resolve...

[TheCycoONE]

@aldarund I don't think it's possible for external tools to find/use the ones that are sent to jest. (Note that all debugging tools including Chrome are affected). Inline source maps are a best of both worlds as Jest is able to use them directly (no need to pass them in), and all other common debuggers can read them.

Both babel-jest and ts-jest produce inline source maps; I'm not aware of another transformer that passes the map directly to jest.