Don't set inputSourceMap on babel-jest transform

[josephlbarnett]

When babel-jest merges the inputSourceMap and the outputSourceMap
it appears to remove names from the resulting sourceMap that are
still referenced by elements of the source map. Not passing the
inputSourceMap appears to solve #474 and still provide source
coverage, but someone who knows how this is supposed to work
should look more closely.

[josephlbarnett]

Pretty sure this isn't want we want to do as we'll lose the mapping chain from vue -> ts -> jest, but here's what I'm seeing:

typescript.transpileModule gives a sourceMap that looks like:

{
  version: 3,
  file: 'User.vue.js',
  sourceRoot: '',
  sources: [ 'User.vue' ],
  names: [],
  mappings: ';;AAkKA,2BAAsB;AACtB,mDAAqC;AAErC,kBAAe,aAAG,CAAC,MAAM,CAAC;IACxB,IAAI,EAAE,cAAc;IACpB,IAAI,EAAE,cAAM,OAAA,CAAC;QACX,SAAS,EAAE,KAAK;QAChB,WAAW,EAAE,KAAK;QAClB,SAAS,EAAE,KAAK;QAChB,WAAW,EAAE,KAAK;QAClB,IAAI,EAAE,EAAE;QACR,QAAQ,EAAE,EAAE;QACZ,WAAW,EAAE,EAAE;QACf,cAAc,EAAE,EAAE;QAClB,cAAc,EAAE,EAAE;QAClB,cAAc,EAAE,KAAK;QACrB,GAAG,EAAE;YACH;gBACE,IAAI,EAAE,wBAAiB,yBAAM,CAAC,EAAE,CAAC,KAAK,EAAE,eAAK,yBAAM;qBAChD,EAAE,CAAC,yBAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;qBACrB,QAAQ,EAAE,MAAG;gBAChB,KAAK,EAAE,YAAY;aACpB;SACF,CAAC,MAAM,CACN,yBAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,UAAC,IAAI,IAAK,OAAA,CAAC;YAC/B,IAAI,EAAE,UAAG,IAAI,eAAK,yBAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,MAAG;YAC/C,KAAK,EAAE,IAAI;SACZ,CAAC,EAH8B,CAG9B,CAAC,CACJ;KACF,CAAC,EAxBU,CAwBV;IACF,QAAQ,EAAE;QACR,WAAW,EAAE;YACX,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,EAAE;gBAC9C,OAAO,IAAI,CAAC,cAAc,CAAC;aAC5B;iBAAM;gBACL,OAAO,IAAI,CAAC;aACb;QACH,CAAC;KACF;IACD,OAAO,EAAE;QACP,IAAI,EAAJ,UAAK,OAAgB;YACnB,IAAI,CAAC,SAAS,GAAG,CAAC,OAAO,CAAC;YAC1B,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC;QAC7B,CAAC;QACD,QAAQ,EAAR,UAAS,GAA0C;YACjD,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;YAC1C,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;YAC3C,IAAI,IAAI,CAAC,WAAW,EAAE;gBACpB,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC;gBACzB,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC;gBACzB,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;aACvB;QACH,CAAC;QACD,GAAG,EAAH,UAAI,EAAwB,EAAE,MAAkB;gBAA1C,GAAG,SAAA;YACP,IAAI,GAAG,IAAI,OAAO,EAAE;gBAClB,MAAM,EAAE,CAAC;aACV;QACH,CAAC;QACD,KAAK,EAAL,UAAM,EAAU;YACd,IAAI,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,KAAK,EAAP,CAAO,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE;gBACjD,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;aACpB;iBAAM;gBACL,IAAI,CAAC,QAAQ,GAAG,YAAY,CAAC;aAC9B;QACH,CAAC;KACF;CACF,CAAC,CAAC'
}

doing babel-jest.transform() without this source map results in:

{
  version: 3,
  file: undefined,
  names: [
    'Object',            'defineProperty', 'exports',
    'value',             'vue_1',          'require',
    'moment_timezone_1', 'default',        'extend',
    'name',              'data',           'saveError',
    'saveConfirm',       'passError',      'passConfirm',
    'timezone',          'oldPassword',    'newPasswordOne',
    'newPasswordTwo',    'notifyViaEmail', 'tzs',
    'concat',            'tz',             'guess',
    'zoneName',          'names',          'map',
    'computed',          'newPassword',    'methods',
    'done',              'success',        'donePass',
    'ret',               'changePassword', 'key',
    '_a',                'mutate',         'setTz',
    'x',                 'indexOf'
  ],
  sourceRoot: undefined,
  sources: [ 'User.vue' ],
  sourcesContent: [
    '"use strict";\n' +
      'Object.defineProperty(exports, "__esModule", { value: true });\n' +
      '...' // strip out rest of code here
  ],
  mappings: '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'
}

which is consumable by a SourceMapConsumer as per generate-code.addToSourceMap()

doing babel-jest.transform({inputSourceMap: mapFromFirstStep}) results in:

{
  version: 3,
  file: undefined,
  mappings: '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',
  names: [
    'exports',        'vue_1',
    'extend',         'name',
    'data',           'saveError',
    'saveConfirm',    'passError',
    'passConfirm',    'timezone',
    'oldPassword',    'newPasswordOne',
    'newPasswordTwo', 'notifyViaEmail',
    'tzs',            'moment_timezone_1',
    'tz',             'guess',
    'concat',         'zoneName',
    'value',          'names',
    'map',            'computed',
    'newPassword',    'methods',
    'done',           'success',
    'donePass',       'ret',
    'changePassword', 'key',
    '_a',             'mutate',
    'setTz',          'x',
    'indexOf'
  ],
  sourceRoot: '',
  sources: [ 'User.vue' ],
  sourcesContent: [ null ]
}

which has fewer entries in names, but appears to still have mappings that refer to names beyond the end of the names[] length, which leads to the exception from #474

[lmiller1990]

Will try get some 👀 on this - we've got a lot of weird incompatible stuff around source maps, the core issue(s) are not super clear.

[josephlbarnett]

another option that potentially works is to assume that babel is set up to handle typescript, and just do a single transform instead of transpiling the typescript and then passing to babel-jest:

so transformers/typescript.js becomes:

module.exports = scriptLang => ({
  process(scriptContent, filePath, config) {
    // instead of calling typescript compiler directly, rely on babel having typescript set up
    // and just pass to babel-jest with a .ts extension
    const vueJestConfig = getVueJestConfig(config)

    const customTransformer =
      getCustomTransformer(vueJestConfig['transform'], 'js') || {}
    const transformer = customTransformer.process
      ? customTransformer
      : babelJest.createTransformer()

    return transformer.process(scriptContent, filePath + (scriptLang === 'tsx' ? '.tsx' : '.ts'), config)
  }
})

or to just do the typescript transpilation and assume it outputs something ok:

module.exports = scriptLang => ({
  process(scriptContent, filePath, config) {
    ensureRequire('typescript', ['typescript'])
    const typescript = require('typescript')
    const vueJestConfig = getVueJestConfig(config)
    const tsconfig = getTypeScriptConfig(vueJestConfig.tsConfig)

    const res = typescript.transpileModule(scriptContent, {
      ...tsconfig,
      fileName: filePath + (scriptLang === 'tsx' ? '.tsx' : '')
    })

    res.outputText = stripInlineSourceMap(res.outputText)

    const inputSourceMap = res.sourceMapText && JSON.parse(res.sourceMapText)

    return { code: res.outputText, map: inputSourceMap }
  }
})

I'm not sure if either assumption is safe to make in general for vue/typescript projects, but both approaches appear to avoid the sourceMap mismatch problem. The coverage report in the typescript-only case looks ok at first glance. The coverage report in the babel-only case appears to miss out on the <template> block in the rendered source, but the code coverage on the <script> looks ok at first glance.

[lmiller1990]

Hi, I don't have time to prioritise this - I normally can just merge + release things that have a test, do we not need one for this? I wonder if we even have some tests around source maps?

You might need to rebase - we released v29 just now: https://github.com/vuejs/vue-jest/releases/tag/v29.0.0

[josephlbarnett]

Hi thanks for the update -- I'll look at rebasing and adding a test if I can. Opened this more as an ask for guidance than an actual suggested fix, but I'll spend some more time trying to narrow this down to something I'd actually recommend as a fix (probably one of the single-transform solutions?).

[josephlbarnett]

hmm everything seems to work ok in my project now with 29.x... not sure what fixed it but 🤷