Fix: vue2.7 ShallowMount Composition API TS Error

[mathiash98]

What kind of change does this PR introduce? (check at least one)

• Bugfix

Does this PR introduce a breaking change? (check one)

• No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

• It's submitted to the dev branch.
• When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
• All tests are passing: https://github.com/vuejs/vue-test-utils/blob/dev/.github/CONTRIBUTING.md#development-setup
• New/updated tests are included

If adding a new feature, the PR's description includes:

• A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

Other information:

Closes #1999
Fixes #1993
Fixes #2026

[netlify]

❌ Deploy Preview for vue-test-utils-v1 failed.

Name	Link
🔨 Latest commit	a3d8847
🔍 Latest deploy log	https://app.netlify.com/sites/vue-test-utils-v1/deploys/6372cabb8caec20008cfb360

[mathiash98]

CircleCI works fine, seems like the netlify deploy script needs to update its node version from 10 to something more LTS

[haoqunjiang]

Wait… This PR doesn't fix #2026

[mathiash98]

Wait… This PR doesn't fix #2026

Hmm could you add the code for a test that fails and I'll add it to the branch to see if it works or not

[mathiash98]

Not sure if this PR actually solves anything, anyhow I was able to run Vue 2.7 with jest 27 with following package.json:

{
"dependencies": {
    "@popperjs/core": "^2.11.6",
    "core-js": "^3.26.1",
    "lodash": "4.17.21",
    "v-tooltip": "2.1.3",
    "vue": "~2.7.14",
    "vue-router": "3.4.3",
    "vue2-leaflet": "2.7.1",
    "vuex": "3.5.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.5",
    "@types/jest": "^29.2.2",
    "@types/lodash": "4.14.188",
    "@typescript-eslint/eslint-plugin": "5.5.0",
    "@typescript-eslint/parser": "5.5.0",
    "@vue/cli-plugin-babel": "^5.0.8",
    "@vue/cli-plugin-eslint": "^5.0.8",
    "@vue/cli-plugin-pwa": "^5.0.8",
    "@vue/cli-plugin-router": "^5.0.8",
    "@vue/cli-plugin-typescript": "^5.0.8",
    "@vue/cli-plugin-unit-jest": "^5.0.8",
    "@vue/cli-plugin-vuex": "^5.0.8",
    "@vue/cli-service": "^5.0.8",
    "@vue/eslint-config-typescript": "7.0.0",
    "@vue/test-utils": "1.3.3",
    "@vue/vue2-jest": "^27.0.0",
    "babel-jest": "^27.5.1",
    "eslint": "7.32.0",
    "eslint-config-prettier": "8.3.0",
    "eslint-plugin-prettier": "4.0.0",
    "eslint-plugin-vue": "8.1.1",
    "flush-promises": "^1.0.2",
    "jest": "^27.1.5",
    "jest-junit": "15.0.0",
    "prettier": "2.1.2",
    "ts-jest": "^27.1.5",
    "typescript": "4.4.2",
    "vue-template-compiler": "^2.7.14"
  }
}

By setting vue-shims.d.ts to:

/**
 * Extends interfaces in Vue.js
 */

import Vue, { ComponentOptions } from "vue";
import { Store } from "./index";

declare module "vue/types/options" {
  interface ComponentOptions<V extends Vue> {
    store?: Store<any>;
  }
}

declare module "vue/types/vue" {
  interface Vue {
    $store: Store<any>;
  }
}

For some reason all the type errors come when I remove declare module "vue/types/vue" (...)...

[malykhinvi]

I managed to fix TS errors with the following type shim:

declare global {
  // With [email protected], DefineComponent is not considered a valid argument for mount and shallowMount
  declare module '@vue/test-utils' {
    import type Vue from 'vue'
    import type { Component } from 'vue'
    import type { ThisTypedShallowMountOptions, ThisTypedMountOptions } from '@vue/test-utils'

    export declare function shallowMount<C extends Component>(
      component: C,
      options?: ThisTypedShallowMountOptions<Vue>
    ): Wrapper<Vue>

    export declare function mount<C extends Component>(
      component: C,
      options?: ThisTypedMountOptions<Vue>
    ): Wrapper<Vue>
  }
}

[lmiller1990]

Hi, sorry I did not look at this PR for a long time.

Do we still need this? It is just address typing issues?

TS is quite problematic in this library now we also need to support <script setup>.

[mathiash98]

Hi, sorry I did not look at this PR for a long time.

Do we still need this? It is just address typing issues?

TS is quite problematic in this library now we also need to support <script setup>.

We can probably close it, as we have a workaround. At least for my case we will at some point migrate to Vue3 either way

[lmiller1990]

Vue 3 is great. I'm still working on cleaning up this repo and patching it, but at a lowered priority.

[ColinRosati]

I would say both shim solutions are not valid. Can we re-open this issue?

#2031 (comment)
Solution creates type issues importing components which are commonly declared via shim-vue.d.ts

#2031 (comment)
This doesnt work if you are using more then just mount, and shallowMount. This overwrites all other declerations.

Vue 2.7 is still being developed as the vue migration path is challenging especially with nuxt projects.

Extending shallowMount & mount with defineComponent is still needed!

[ColinRosati]

lmiller1990 RE: #2031 (comment)

Can you point out the <script setup> issue and which version TS makes incompatiblity?

[lmiller1990]

Happy to accept a PR improving the types - I don't know the status of Vue 2.7 + script setup + TypeScript + this library - all my Vue 2 projects are written using JS.

What's the feature request exactly?