Breakpoints not being hit in vue files

[ssnowicki]

I cannot get breakpoints to hit in vue components when I debug my unit tests in Webstorm. This used to work, with older versions of jest and vue-jest. I'm not sure which version it stopped working though.

... "babel-jest": "^27.4.6", "jest": "^27.4.7", "@vue/test-utils": "^2.0.0-rc.18", "@vue/vue3-jest": "^27.0.0-alpha.4", ... "jest": { "collectCoverage": false, "coverageProvider": "babel", "testEnvironment": "jsdom", "moduleFileExtensions": [ "js", "vue" ], "moduleNameMapper": { "@/components/(.)$": "/src/components/$1", "@/views/(.)$": "/src/views/$1", "@/mixins/(.*)$": "/src/mixins/$1", ".png": "/tests/mocks/fileMock.js", ".svg": "/tests/mocks/fileMock.js", "^lodash-es$": "lodash" }, "transform": { "^.+\.js$": "babel-jest", "^.+\.vue$": "@vue/vue3-jest" }, "snapshotSerializers": [ "/node_modules/jest-serializer-vue" ], "coverageThreshold": { "global": { "statements": 70 } } }

[nsorin]

I have a similar setup with @vue/vue2-jest and the same issue occurs. Breakpoints are not hit in .vue files, they work everywhere else.

[provegard]

I solved it by wrapping vue2-jest and converting the source map to a comment:

vue-preprocessor.js:

const inner = require("@vue/vue2-jest")
const convert = require("convert-source-map")

module.exports = {
    getCacheKey: inner.getCacheKey,

    process(src, filename, config) {
        const { code, map } = inner.process(src, filename, config)
        const comment = convert.fromObject(map).toComment()
        return `${code}\n\n${comment}`
    },
}

In my Jest config:

    transform: {
        ...
        "\\.vue$": require.resolve("./vue-preprocessor"),
        ...
    },

[BaskovicP]

Amazing @provegard worked for me. I am using pycharm to debug vue.js and it worked like a charm. If I may add changing const inner = require("@vue/vue2-jest") to const inner = require('vue-jest'); work also great if you are not using Jest@27

[lmiller1990]

I am amazed that work around works, lol, nice job! Can we incorporate it into this transformer somehow so everyone can use it?

[sudhishmathew]

Hi,

for me and @smack0007 the workaround also does not work. Have created a simple example at https://github.com/sudhishmathew/test-vue2-jest. Could you please have a look?

Thanks

[Kjoep]

I solved it by wrapping vue2-jest and converting the source map to a comment:

vue-preprocessor.js:

const inner = require("@vue/vue2-jest")
const convert = require("convert-source-map")

module.exports = {
    getCacheKey: inner.getCacheKey,

    process(src, filename, config) {
        const { code, map } = inner.process(src, filename, config)
        const comment = convert.fromObject(map).toComment()
        return `${code}\n\n${comment}`
    },
}

In my Jest config:

    transform: {
        ...
        "\\.vue$": require.resolve("./vue-preprocessor"),
        ...
    },

I used this approach, but with a small change, to fix it for me. The map that is returned by process is a string, whereas fromObject expects an object. So I did

        const r = inner.process(src, filename, config);
        const map = typeof r.map === 'string' ? JSON.parse(r.map) : r.map;
        const comment = convert.fromObject(map).toComment();
        r.code = `${r.code}\n\n${comment}`;
        return r;