Source maps for vue2 SFCs using TS are not created/wrongly created for v28

[phloose]

After upgrading to Jest v28 SFCs that are using TypeScript and the Composition-API plugin for Vue2 are producing a weird error:

FAIL  ***/FormDateInput.spec.ts
  ● Test suite failed to run

    No element indexed by 61

      4 | import Vue from 'vue';
      5 |
    > 6 | import FormDateInput from './FormDateInput.vue';
        | ^
      7 |
      8 | const localVue = createLocalVue();
      9 |

      at ArraySet_at [as at] (node_modules/source-map/lib/array-set.js:92:9)
      at BasicSourceMapConsumer.SourceMapConsumer_originalPositionFor [as originalPositionFor] (node_modules/source-map/lib/source-map-consumer.js:626:30)
      at node_modules/@vue/vue2-jest/lib/generate-source-map.js:29:28
          at Array.forEach (<anonymous>)
      at generateSourceMap (node_modules/@vue/vue2-jest/lib/generate-source-map.js:26:38)
      at Object.module.exports [as process] (node_modules/@vue/vue2-jest/lib/process.js:129:15)
      at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:619:31)
      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:765:40)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:822:19)
      at Object.<anonymous> (***/FormDateInput.spec.ts:6:1)

It seems to me, that vue2-jest cannot produce source-maps or creates them i a way that is not consumable by the underlying source-map lib.

Relevant packages installed in a node 16 environment with npm 8 are:

• "@vue/vue2-jest": "^28.0.0"
• "jest": "^28.1.0"
• "ts-jest": "^28.0.2"
• "typescript": "^4.6.3"

I know that these version do not match exactly, but it makes no difference: Even if i downgrade all to exactly v28.0.0 it does not work

The transformers property lists @vue/vue2-jest correctly for transforming vue files, which also worked for vue-jest v27 and jest 27. I have also tried to include the full path in node modules like <rootDir>/node_modules/@vue/vue2-jest, but without success.

  transform: {
    '.*\\.(vue)$': '@vue/vue2-jest',
    '.*\\.(js)$': 'babel-jest',
    '.*\\.(ts)$': 'ts-jest',
  },

Unfortunatly i cannot include a repo link since its proprietary software.

Am i missing something in the way to upgrade to jest v28 or is this a bug?

[josephlbarnett]

Seeing the same thing here in a non-proprietary repo if it's helpful: josephlbarnett/quizzy#1068 (failed build logs here: https://app.circleci.com/pipelines/github/josephlbarnett/quizzy/1690/workflows/d58f4634-db27-4f1e-9065-4709dc7dd24c/jobs/1729 )

[gbenson-ff]

I'm getting similar errors in a project using Vue 3 SFCs and Typescript

[josephlbarnett]

it looks like in my case a dependency on "@babel/preset-env": "^7.17.10" was pulling in source-map@0.5.7, possibly causing an incompatibility with source-map@0.6.1 pulled in by jest 28. bumping "@babel/preset-env": "^7.18.2" removes that transitive source-map dependency and appears to fix this particular issue.

What's weird is that vue2-jest declares a dependency on source-map@0.5.6, but seems to work anyway?:

├─┬ @vue/vue2-jest@28.0.0
│ ├─┬ @vue/component-compiler-utils@3.3.0
│ │ ├─┬ merge-source-map@1.1.0
│ │ │ └── source-map@0.6.1
│ │ ├─┬ postcss@7.0.39
│ │ │ └── source-map@0.6.1 deduped
│ │ └── source-map@0.6.1
│ └── source-map@0.5.6
├─┬ jest@28.1.1
│ └─┬ @jest/core@28.1.1
│   ├─┬ @jest/reporters@28.1.1
│   │ └─┬ istanbul-lib-source-maps@4.0.1
│   │   └── source-map@0.6.1
│   └─┬ jest-runner@28.1.1
│     └─┬ source-map-support@0.5.13
│       └── source-map@0.6.1

[cj848]

Wouldn't this error be resolved? I'm using vue3-jest right now and using vite as my build tool, I'm getting the same error and it's not resolved.

[truuman]

Can this be related to vuejs/vue-test-utils#1989?

Although that issue occurs with v27 and v26 (with vue-jest instead of @vue/vue2-jest) as well.

[lmiller1990]

I am sure the issue is here, not test utils.

Maybe fixed here: #486 (review)

@cj848 This issue is specifically for V2 - I thought for Vue 3 + the latest vue3-jest solved this, what version are you on?

[cj848]

I am sure the issue is here, not test utils.

Maybe fixed here: #486 (review)

@cj848 This issue is specifically for V2 - I thought for Vue 3 + the latest vue3-jest solved this, what version are you on?

I have confirmed that the test works normally based on the latest versions. Thank you.

[truuman]

I can also confirm that #486 (review) solves vuejs/vue-test-utils#1989

[josephlbarnett]

@lmiller1990 it does look like this broke in 28.1.0 where i somehow managed to have it working in 28.0.1 (see my above npm list comment)...

https://app.circleci.com/pipelines/github/josephlbarnett/quizzy/1916/workflows/be23a5ab-da3c-4f6f-87f2-fc2cfdd041ad/jobs/1959

[lmiller1990]

@josephlbarnett weird - this PR #486 was supposed to fix source maps in Vue 2.

Edit: maybe this will fix it: #489

[josephlbarnett]

Its even stranger, I had it failing locally and was messing with forcing the same version of source-map everywhere (0.6.1) when it suddenly started working. Now even if I revert all my changes, rm -rf node_modules and start over, I can't get it to fail again locally (but it does still fail in CI).

[dten]

I was reading #474 and #486 and how they didn't seem to quite fix it.

just wanted to say #489 also does not fix it for me

this is 28.1.0 compared with that PR. It's different, but nether is correct

one weird thing is if on 28.1.0 i add an error above the line where it should be then it works correctly. I don't understand it enough to know why though..

[dten]

oh the issue seems to be some caching

if i run npm test -- --no-cache it works correct only 28.1.0, but as soon as i remove it it goes back to wrong

edit:: npm test -- --clearCache resolved it all

final test results with cache issue resolved

28.0.0 - wrong maps
28.1.0 - correct 🎉
#489 - wrong