minimal vue2 typescript test project doesnt build

[nemeros]

Vue version

2.7.7

Step to reproduce

PS D:\dev\> npm create vue@2 vue-minimal

Vue.js - The Progressive JavaScript Framework

√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add Cypress for End-to-End testing? ... No / Yes
√ Add ESLint for code quality? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes

Scaffolding project in D:\dev\cfdp\vue-minimal...

then run the commands :

npm install
npm run build

What is expected ?

The build should finish without error

What is actually happening ?

The following stack trace appear :

vite v3.1.8 building for production...
✓ 22 modules transformed.
rendering chunks (1)...src/components/__tests__/HelloWorld.spec.ts:8:27 - error TS2769: No overload matches this call.
  The last overload gave the following error.
    Argument of type 'ComponentPublicInstanceConstructor<Vue3Instance<{}, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{ msg: string; }>>>, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{ msg: string; }>>>, {}, {}, true, ComponentOptionsBase<...>> & ... 4 more ... & Readonly<...>, ... 4 more ..., MethodOptions> & Com...' is not assignable to parameter of type 'ExtendedVue<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, ...>>, ... 6 more ..., ComponentOptionsMixin>'.
      Type 'ComponentPublicInstanceConstructor<Vue3Instance<{}, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{ msg: string; }>>>, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{ msg: string; }>>>, {}, {}, true, ComponentOptionsBase<...>> & ... 4 more ... & Readonly<...>, ... 4 more ..., MethodOptions> & Com...' is missing the following properties from type 'VueConstructor<ExtractComputedReturns<{}> & DefaultProps & Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<...>> & ShallowUnwrapRef<...> & Vue<...>>': extend, nextTick, set, delete, and 10 more.

8     const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } })
                            ~~~~~~~~~~

  node_modules/@vue/test-utils/types/index.d.ts:193:25
    193 export declare function mount<V extends Vue, Props = DefaultProps> (component: ExtendedVue<V, {}, {}, {}, Props>, options?: FunctionalComponentMountOptions<V>): Wrapper<CombinedVueInstance<V, {}, {}, {}, Props> & Vue>
                                ~~~~~
    The last overload is declared here.


Found 1 error in src/components/__tests__/HelloWorld.spec.ts:8

ERROR: "type-check" exited with 2.

Annex

package.json :

{
  "name": "vue-minimal",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview --port 4173",
    "test:unit": "vitest --environment jsdom",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  },
  "dependencies": {
    "vue": "^2.7.7"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.1.0",
    "@types/jsdom": "^16.2.14",
    "@types/node": "^16.11.45",
    "@vitejs/plugin-legacy": "^2.0.0",
    "@vitejs/plugin-vue2": "^1.1.2",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^11.0.0",
    "@vue/test-utils": "^1.3.0",
    "@vue/tsconfig": "^0.1.3",
    "eslint": "^8.5.0",
    "eslint-plugin-vue": "^9.0.0",
    "jsdom": "^20.0.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.5.1",
    "terser": "^5.14.2",
    "typescript": "~4.7.4",
    "vite": "^3.0.2",
    "vitest": "^0.18.1",
    "vue-template-compiler": "^2.7.7",
    "vue-tsc": "^0.38.8"
  }
}

[sodatea]

Looks like a regression caused by vuejs/vue#12727

[nemeros]

Thanks for your feedback.

For the moment the workaround i've found is to put "strict": false inside the tsconfig.vitest.json file.

I do not know if their's a cleaner approch

[baboon-king]

like vuejs/vue-test-utils#2087