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 Githubissues.

Githubissues is a development platform for aggregating issues.