typescriptvue.jsvitevue-tsc

Why does vue-tsc think it should look for Vue Test Utils types in my custom types file?


I have a simple project built with Vite, Vue3, TypeScript and Jest for testing.

I have a Vue component called Btn.vue that import a Variant type from my @/types/index.d.ts. (Note that the @ alias is configured in my tsconfig.json, my vite.config.js and my jest.config.js)

Btn.vue

<script setup lang="ts">
import { Variant } from '@/types'
// ...the rest of the component
</script>

types/index.d.ts

export type Variant = 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'

This component has a bunch of tests in an adjacent spec file. The tests run fine and all pass.

Btn.spec.ts

import { mount } from '@vue/test-utils'
import Btn from './Btn.vue'

describe('Btn component', () => {
  // ...all the tests
})

However, when I build the project with vue-tsc --noEmit && vite build I get a bunch of errors like the following (truncated for brevity).

node_modules/@vue/test-utils/dist/interfaces/wrapperLike.d.ts:1:10 - error TS2305:Module '"src/types"' has no exported member 'DefinedComponent'.
1 import { DefinedComponent, FindAllComponentsSelector, FindComponentSelector, NameSelector, RefSelector } from 'src/types';
           ~~~~~~~~~~~~~~~~

node_modules/@vue/test-utils/dist/interfaces/wrapperLike.d.ts:1:28 - error TS2305: Module '"src/types"' has no exported member 'FindAllComponentsSelector'.
1 import { DefinedComponent, FindAllComponentsSelector, FindComponentSelector, NameSelector, RefSelector } from 'src/types';
                             ~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@vue/test-utils/dist/interfaces/wrapperLike.d.ts:1:55 - error TS2305: Module '"src/types"' has no exported member 'FindComponentSelector'.
1 import { DefinedComponent, FindAllComponentsSelector, FindComponentSelector, NameSelector, RefSelector } from 'src/types';

It seems that vue-tsc is getting confused as to where it should be looking for Vue Test Utils types and is defaulting to my custom types file for some reason.


Solution

  • According to this reply to my bug report on the Vue Test Utils Github, the issue stems from relative imports and should be fixed in the next release. I'm using ^2.0.0-rc.18 so that probably means ^2.0.0-rc.19.

    In the mean time, adding "skipLibCheck": true, to the compilerOptions in my tsconfig.json made the build work without error.