Fix: vue2.7 ShallowMount Composition API TS Error #2031
Conversation
replace createComponent with defineComponent and upgrade vue to vue 2.7.14. Fixes TS typings when shallowMounting CompositionApi
❌ Deploy Preview for vue-test-utils-v1 failed.
|
|
CircleCI works fine, seems like the netlify deploy script needs to update its node version from 10 to something more LTS |
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 |
|
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 /**
* 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 |
|
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>
}
} |
|
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 |
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 |
|
Vue 3 is great. I'm still working on cleaning up this repo and patching it, but at a lowered priority. |
|
I would say both shim solutions are not valid. Can we re-open this issue? #2031 (comment) #2031 (comment) 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! |
|
lmiller1990 RE: #2031 (comment) Can you point out the <script setup> issue and which version TS makes incompatiblity? |
|
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? |
What kind of change does this PR introduce? (check at least one)
Does this PR introduce a breaking change? (check one)
If yes, please describe the impact and migration path for existing applications:
The PR fulfills these requirements:
devbranch.fix #xxx[,#xxx], where "xxx" is the issue number)If adding a new feature, the PR's description includes:
Other information:
Closes #1999
Fixes #1993
Fixes #2026