Source maps

[lmiller1990]

Add support for source maps

[lmiller1990]

Interesting one. So for the Hello.vue:

    tests/Hello.vue.ts:9:31 - error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.

    9     const count = ref<string>(5)
                                    ~
    tests/Hello.vue.ts:10:23 - error TS2356: An arithmetic operand must be of type 'any', 'number', 'bigint' or an enum type.

    10     const inc = () => count.value++
                             ~~~~~~~~~~~

Note: ts-jest says lines 9 and 10 are problems.

Looking at the source map from Vue/SFC compiler:

{
  version: 3,
  sources: [ 'component.vue' ],
  names: [],
  mappings: ';AAKA,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;EACL,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;EACf,CAAC,CAAC;AACJ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;;AAEX,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;EAC7B,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;IACN,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;IAE9B,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;MACL,CAAC,CAAC,CAAC,CAAC,CAAC;MACL,CAAC,CAAC;IACJ;EACF;AACF,CAAC',
  file: 'component.vue',
  sourceRoot: '',
  sourcesContent: [
    '<template>\n' +
      '  <button @click="inc">Count: {{ count }}</button>\n' +
      '</template>\n' +
      '\n' +
      '<script lang="ts">\n' +
      'import {\n' +
      '  defineComponent,\n' +
      '  ref\n' +
      "} from 'vue'\n" +
      '\n' +
      'export default defineComponent({\n' +
      '  setup() {\n' +
      '    const count = ref<string>(5)\n' +
      '    const inc = () => count.value++\n' +
      '\n' +
      '    return {\n' +
      '      count,\n' +
      '      inc\n' +
      '    }\n' +
      '  }\n' +
      '})\n' +
      '</script>\n'
  ]
}

The error SHOULD show lines 13-14. We need to offset for the <template> I guess. Vue-jest appears to have some stuff going on which is probably for similar reasons: https://github.com/vuejs/vue-jest/blob/master/lib/generate-source-map.js.

Million dollar question here is going to be: how do we "trick" ts-jest into showing the right line numbers? Naive solution would just be appending "\n" * N to the input to ts-jest, where N is the correct offset.

What do you think @ahnpnl?

Also of interest: if we are really ambitious, we may even be able to type-check the <template>... https://twitter.com/youyuxi/status/1307398376464539648

[lmiller1990]

output = super.process("\n".repeat(4) + scriptResult.content, `${filePath}.ts`, jestConfig, transformOptions)

We can "trick" it. This might work!

[ahnpnl]

LGTM, I think this is the easiest solution we can have.

[ahnpnl]

Also of interest: if we are really ambitious, we may even be able to type-check the <template>... https://twitter.com/youyuxi/status/1307398376464539648

This is really nice. So if the tests pass type checking of TS, the next check is template check which will then also throw errors if something goes wrong for template.