const wrapper = mount(Comp, {
  data() {
    return { foo: 'bar' }
} as any)

declare module '*.vue' {
  import { DefineComponent } from 'vue';
  const component: DefineComponent;
  export default component;
In the future we aim to have type inference with vue files too. For now, you may need to use as any to avoid compilation errors in your tests.
Original issue:
No idea what's going on.
Some days I wonder if TS is actually making the DX better or worse, lol.
import { mount } from '@vue/test-utils'
const Layout = {
  template: `
      <header>
        <slot name="header" />
      </header>
        <slot name="main" />
      </main>
      <footer>
        <slot name="footer" />
      </footer>
test('layout full page layout', () => {
  const wrapper = mount(Layout, {
    slots: {
      header: '<div>Header</div>',
      main: '<div>Main Content</div>' ,
      footer: {
        template: '<div>Footer</div>'
  expect(wrapper.html()).toContain('Main Content')
          
I'm running into an issue with a somewhat similar error message.
This works fine when the Component is declared within the spec file (I just discovered)
example.spec.ts
import { mount} from '@vue/test-utils'
const Layout = {
  template: `
    <button v-if="loggedIn" data-test="logoutbtn">Logout</button>
  data: () => ({
    loggedIn: false,
describe('Layout.vue', () => {
  it('renders button when logged in', () => {
    const wrapper = mount(Layout, {
      data() {
        return {
          loggedIn: true
    expect(wrapper.findAll('[data-test="logoutbtn"]').length === 1).toBe(true);
But fails with a No overload matches this call error when trying to import the Component.
Layout.vue
<template>
    <button v-if="loggedIn" data-test="logoutbtn">Logout</button>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Layout',
  data: () => ({
    loggedIn: false,
</script>
example.spec.ts
import { mount} from '@vue/test-utils'
import Layout from '@/components/Layout.vue';
describe('Layout.vue', () => {
  it('renders button when logged in', () => {
    const wrapper = mount(Layout, {
      data() {
        return {
          loggedIn: true
    expect(wrapper.findAll('[data-test="logoutbtn"]').length === 1).toBe(true);
Test suite failed to run
    TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
    tests/unit/example.spec.ts:18:27 - error TS2769: No overload matches this call.
      The last overload gave the following error.
        Argument of type 'ComponentPublicInstanceConstructor<({ $: ComponentInternalInstance; $data: {}; $props: ({ [x: number]: string; } & { length?: number | undefined; toString?: string | undefined; toLocaleString?: string | undefined; ... 19 more ...; flat?: unknown[] | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustom...' is not assignable to parameter of type 'ComponentOptionsWithObjectProps<(readonly string[] & ThisType<void>) | (Readonly<ComponentObjectPropsOptions<Record<string, unknown>>> & ThisType<void>), ... 8 more ..., Readonly<...> | Readonly<...>>'.
          Type 'ComponentPublicInstanceConstructor<({ $: ComponentInternalInstance; $data: {}; $props: ({ [x: number]: string; } & { length?: number | undefined; toString?: string | undefined; toLocaleString?: string | undefined; ... 19 more ...; flat?: unknown[] | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustom...' is not assignable to type 'ComponentOptionsBase<Readonly<{} & { [x: number]: string | undefined; length?: number | undefined; toString?: string | undefined; toLocaleString?: string | undefined; concat?: string[] | undefined; join?: 
string | undefined; ... 17 more ...; flat?: unknown[] | undefined; }> | Readonly<...>, ... 7 more ..., string>'.  
            Types of property 'setup' are incompatible.
              Type '((this: void, props: Readonly<{ [x: number]: string; } & { length?: number | undefined; toString?: string | undefined; toLocaleString?: string | undefined; concat?: string[] | undefined; join?: string | undefined; ... 17 more ...; flat?: unknown[] | undefined; }> | Readonly<...>, ctx: SetupContext<...>) => unknown) ...' 
is not assignable to type '((this: void, props: Readonly<{} & { [x: number]: string | undefined; length?: number | undefined; toString?: string | undefined; toLocaleString?: string | undefined; concat?: string[] | undefined; join?: string | undefined; ... 17 more ...; flat?: unknown[] | undefined; }> | Readonly<...>, ctx: SetupContext<...>) =...'.
                Type '(this: void, props: Readonly<{ [x: number]: string; } & { length?: number | undefined; toString?: string | undefined; toLocaleString?: string | undefined; concat?: string[] | undefined; join?: string | undefined; slice?: string[] | undefined; ... 16 more ...; flat?: unknown[] | undefined; }> | Readonly<...>, ctx: Se...' is not assignable to type '(this: void, props: Readonly<{} & { [x: number]: string | undefined; length?: number 
| undefined; toString?: string | undefined; toLocaleString?: string | undefined; concat?: string[] | undefined; join?: string | undefined; ... 17 more ...; flat?: unknown[] | undefined; }> | Readonly<...>, ctx: SetupContext<...>) =>...'.
                  Types of parameters 'ctx' and 'ctx' are incompatible.
                    Type 'SetupContext<string[]>' is not assignable to type 'SetupContext<EmitsOptions>'.
                      Type 'EmitsOptions' is not assignable to type 'string[]'.
                        Type 'Record<string, ((...args: any[]) => any) | null>' is missing the following properties from type 'string[]': length, pop, push, concat, and 28 more.
    18     const wrapper = mount(Layout, {
                                 ~~~~~~
      node_modules/@vue/test-utils/dist/mount.d.ts:34:25
        34 export declare function mount<PropsOptions extends Readonly<ComponentPropsOptions>, RawBindings, D, C extends ComputedOptions = {}, M extends Record<string, Function> = {}, E extends EmitsOptions = Record<string, any>, Mixin extends ComponentOptionsMixin = ComponentOptionsMixin, Extends extends ComponentOptionsMixin = ComponentOptionsMixin, EE extends string = string>(componentOptions: ComponentOptionsWithObjectProps<PropsOptions, RawBindings, D, C, M, E, Mixin, Extends, EE>, options?: MountingOptions<ExtractPropTypes<PropsOptions>, D>): VueWrapper<ComponentPublicInstance<ExtractPropTypes<PropsOptions>, RawBindings, D, C, M, E, VNodeProps & ExtractPropTypes<PropsOptions, false>>>;
                                   ~~~~~
        The last overload is declared here.
Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        2.584s
          
Can you share how you are typing .vue files? It's usually in a file like vue-shims.d.ts.
Also possible rc.10 changed something. I think the types might have got refactored. Man, TS is so good until you run into oddities like this. Are you on rc.10?




    

          
The project was a fresh CLI project using [email protected]. Upgrading to [email protected] yields the same error, I'm afraid.
vue-shims.d.ts
declare module '*.vue' {
  import { defineComponent } from 'vue';
  const component: ReturnType<typeof defineComponent>;
  export default component;
          
So basically the shim is the problem...
What happens when you do something like
declare module '*.vue' {
  const component: any
  export default component;
Does it at least let you proceed? I wonder if we can do so something like this in the the code-base here.
Not great but reduced type-checking is much better than ts errors out of the box. I don't know enough about typing Vue components to provide a quick fix, unfortunately, I think getting the types "right" will take some effort.
I know you guys are busy but @cexbrayat or @pikax have done the vast majority of work around types here, is there a quick fix we can do until we have "correct' types? We definitely need to make sure things are working out of the box (I think it's fine not to have perfect typing for props etc inside of mount for now, as long as the tests compile and run). Can we just type the first argument to mount as ReturnType<typeof defineComponent> for now, for example? Any downside to this?
which is not a valid Slot
type Slot = VNode | string | { render: Function } | Function 
adding the Component to it should be enough:
type Slot = VNode | string | { render: Function } | Function | Component
          
@lmiller1990
Modifying the shim file does resolve the original error, but I still run into an error if I try passing in a data property
example.spec.ts
import { mount } from '@vue/test-utils';
import Layout from '@/components/Layout.vue';
describe('Layout.vue', () => {
  it('renders button when logged in', () => {
    const wrapper = mount(Layout, {
      data() {
        return {
          loggedIn: true
    });
    expect(wrapper.findAll('[data-test="logoutbtn"]').length === 1).toBe(true);
  });
});
Test suite failed to run
TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
tests/unit/example.spec.ts:18:7 - error TS2769: No overload matches this call.
  The last overload gave the following error.
    Type '() => { loggedIn: boolean; }' is not assignable to type '() => never'.
      Type '{ loggedIn: boolean; }' is not assignable to type 'never'.
18       data() {
  node_modules/@vue/test-utils/dist/mount.d.ts:34:25
    34 export declare function mount<PropsOptions extends Readonly<ComponentPropsOptions>, RawBindings, D, C extends ComputedOptions = {}, M extends Record<string, Function> = {}, E extends EmitsOptions = Record<string, any>, Mixin extends ComponentOptionsMixin = ComponentOptionsMixin, Extends extends ComponentOptionsMixin = ComponentOptionsMixin, EE extends string = string>(componentOptions: ComponentOptionsWithObjectProps<PropsOptions, RawBindings, D, C, M, E, Mixin, Extends, EE>, options?: MountingOptions<ExtractPropTypes<PropsOptions>, D>): VueWrapper<ComponentPublicInstance<ExtractPropTypes<PropsOptions>, RawBindings, D, C, M, E, VNodeProps & ExtractPropTypes<PropsOptions, false>>>;
                                ~~~~~
    The last overload is declared here.
Types are wrong when using slots mounting option
Types are wrong when using data mounting option
    Sep 10, 2020
          
I will focus on the types a bit more soon. I am migrating a lib from VTU v1 + JS -> VTU v2 + TS and it's an absolute nightmare. Note the error in mount(Foo)
Edit: it should be global.mocks but same problem happens.
          
@calebbergman
So actually fixing the types here seems complex - type-safety for vue files seems like it's a fair way off. Works great with components using render functions, though.
Anyway, here is what I would currently recommend:
    const wrapper = mount(Layout, {
      data() {
        return {
          loggedIn: true
    } as any);
Notice as any at the end. Yes this kind of sucks but I don't see a good way to otherwise solve this - I think some work is needed both in Vue core around the types and in VTU's mount types, it's pretty complicated as you can imagine.
I will update the docs - I hope this will let you continue testing your components 👍
Types are wrong when using data mounting option
TypeScript error when using data/props mounting option
    Sep 17, 2020
declare module "*.vue" {
  import { ComponentOptions } from "vue";
  const comp: ComponentOptions;
  export default comp;
Hello world:
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script lang="ts">
export default {
  name: "HelloWorld",
  props: {
    msg: { type: String, default: "Welcome to Your Vue.js App" },
</script>
Test files:
import { shallowMount } from "@vue/test-utils";
import HelloWorld from "@/components/HelloWorld.vue";
describe("HelloWorld.vue", () => {
  it("renders props.msg when passed", () => {
    const msg = "new message";
    const wrapper = shallowMount(HelloWorld, {
      props: { msg },
    });
    expect(wrapper.text()).toMatch(msg);
  })




    
;
});
Error:
 FAIL  tests/unit/example.spec.ts
  ● Test suite failed to run
    TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
    tests/unit/example.spec.ts:7:34 - error TS2769: No overload matches this call.
      The last overload gave the following error.
        Argument of type 'ComponentOptions<{}, any, any, any, any, any, any, any>' is not assignable to parameter of type 'ComponentOptionsWithObjectProps<readonly string[] | Readonly<ComponentObjectPropsOptions<Record<string, unknown>>>, any, any, any, any, any, any, any, string, Readonly<...> | Readonly<...>, { ...; } | {}>'.
          Property 'props' is missing in type 'ComponentOptionsBase<{}, any, any, any, any, any, any, any, string, {}> & ThisType<any>' but required in type '{ props: (readonly string[] & ThisType<void>) | (Readonly<ComponentObjectPropsOptions<Record<string, unknown>>> & ThisType<void>); }'.
    7     const wrapper = shallowMount(HelloWorld, {
                                       ~~~~~~~~~~
      node_modules/@vue/runtime-core/dist/runtime-core.d.ts:335:5
        335     props: PropsOptions & ThisType<void>;
                ~~~~~
        'props' is declared here.
      node_modules/@vue/test-utils/dist/mount.d.ts:36:25
        36 export declare function mount<PropsOptions extends Readonly<ComponentPropsOptions>, RawBindings, D, C extends ComputedOptions = {}, M extends Record<string, Function> = {}, E extends EmitsOptions = Record<string, any>, Mixin extends ComponentOptionsMixin = ComponentOptionsMixin, Extends extends ComponentOptionsMixin = ComponentOptionsMixin, EE extends string = string>(componentOptions: ComponentOptionsWithObjectProps<PropsOptions, RawBindings, D, 
C, M, E, Mixin, Extends, EE>, options?: MountingOptions<ExtractPropTypes<PropsOptions>, D>): VueWrapper<ComponentPublicInstance<ExtractPropTypes<PropsOptions>, RawBindings, D, C, M, E, VNodeProps & ExtractPropTypes<PropsOptions>>>;
                                   ~~~~~
        The last overload is declared here.
Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        4.168s
Ran all test suites.
Addtional Info:
Works fine with:
import { shallowMount } from "@vue/test-utils";
import HelloWorld from "@/components/HelloWorld.vue";
describe("HelloWorld.vue", () => {
  it("renders props.msg when passed", () => {
    const msg = "new message";
    const wrapper = shallowMount(HelloWorld as any, {
      props: { msg },
    });
    expect(wrapper.text()).toMatch(msg);
  });
});
When casting HelloWorld to any
  qunbotop, jcppman, shk33, ssahillppatell, leegocode, priiduneemre, and cp-dharti-r reacted with thumbs up emoji
  marcoarruda and sunpochin reacted with heart emoji
    All reactions
          
@Mister-Hope Can you try to use the following shim:
declare module '*.vue' {
  import { DefineComponent } from 'vue';
  const component: DefineComponent;
  export default component;
You have a fairly basic use-case, that we cover in the tests of VTU, so it should be working 🤞
  villetakanen, sodatea, Mister-Hope, eratio08, reenekt, mykalmax, maxmaccari, chenkaiC4, awerlang, shippokun, and 7 more reacted with thumbs up emoji
  vincerubinetti, KosKosovuch, and Mykola-Veryha reacted with thumbs down emoji
    All reactions
      
Update TypeScript shim for SFC files according to this GitHub comment:
vuejs/test-utils#194 (comment)
Fixes type errors in tests after upgrading to Vue 3.0.0.
declare module '*.vue' {

import { DefineComponent } from 'vue';

const component: DefineComponent;

export default component;

You have a fairly basic use-case, that we cover in the tests of VTU, so it should be working 🤞
Hi. This aolution is not working for me :( I have the same problem

          
maybe the vite startup page give you some inspiration:

Provide types for    *.vue imports

tsconfig setup:


1. Install and add

@vuedx/typescript-plugin-vue to tsconfig plugins


2. Delete shims-vue.d.ts


3. Open

src/main.ts in VSCode


4. Open VSCode command input


5. Search and run "Select TypeScript version" -> "Use workspace version"
          
Note for people stumbling on this issue from google, improperly formatted mount options can cause issues that look like this (makes you think that the problem is with the component being mounted), and won't be fixed by the shim solution above.
In my case, I was accidentally passing an array of Vue components to components like:
mount(Component, { global: { components: [Button, etc] } })
instead of the object it expects like
mount(Component, { global: { components: { Button, etc } } })
          
In my case, similar to what @vincerubinetti said, I had assumed initially that the issue was with how it was being mounted.
it("renders title correctly", () => {
    const buttonText = "Test Button";
    const wrapper = mount(IconButton, {
      props: {
        titleConfig: {
          value: buttonText,
    });
    expect(wrapper.text()).toMatch(buttonText);
  });
Turns out, the type for my prop titleConfig was set to an interface that required two keys to be passed and I was passing only one of them (value). Setting the other key as optional in the interface definition removed this error for me.
          
So if anyone is still having an issue with this, you need to correctly match your types that you're using for your component's PropType with what you're passing in on the test mount.
They need to explicitly match for the typescript engine to confirm parity.
@Mister-Hope Can you try to use the following shim:
declare module '*.vue' {
  import { DefineComponent } from 'vue';
  const component: DefineComponent;
  export default component;
You have a fairly basic use-case, that we cover in the tests of VTU, so it should be working 🤞
Where should I put this in?
          
For some reason, my vs code doesn't find the shim at all.  :(
I still suffered from the pain and started to doubt the meaning of the efforts here.  To the community, typing information registry is always a dump yard.    You code typing could be broken even by just installing a node module (doubt it?  try to install storybook to any boilerplate project).   In a mono repo with multiple tsconfig.json,  getting the type load correctly is even a life mercy.
          
What if you open the file with the shim? I've noticed sometimes VS Code does not pick it up.
Typing Vue imports is complex, it's unfortunate but it's the reality of the situation. See the type... https://github.com/vuejs/test-utils/blob/main/src/mount.ts#L89-L306
Since using the Volar extension, it's working well for me in all my projects (including some large mono repos with multiple tsconfig.json. It was a bit of messing around, iirc).
If you can reproduce your problem in a minimal project, we can try to fix it. It's also possible that a more recent version of Vue came out and broke something, in which case we need to fix that, too.
          
@lmiller1990, Thanks a million for pointing to create a minimal reproducible project.
It turns out it is caused by a complex type in prop type.  in Test file, the mount does not agree with the shape literal type.   using as TargetType in the props value solves it.   The complex type is from highcharts and it is ridiculous complex from nested A extends B syntax.  Would be better to define our own type instead of using the provided ones.
So if anyone is still having an issue with this, you need to correctly match your types that you're using for your component's PropType with what you're passing in on the test mount.
They need to explicitly match for the typescript engine to confirm parity.
I want to confirm this comment.
We initially added the shim #194 (comment) to suppress the errors, but ultimately it was an genuine error.
The problem for us was Volar not picking up the TS error, but there was an inconsistency in the shape of the TS types expected from the mount
          
Another way to solve the issue is to use InstanceType.
function getWrapper(): VueWrapper<InstanceType<typeof PatientInfo>> {
  return mount(PatientInfo);