TypeScript error when using data/props mounting option

[lmiller1990]

For those coming from Google/elsewhere: If you have some problems with typing, for example when writing tests with ts-jest and using SFC (.vue) files, the work-around is to as as any. Eg:

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

Or try this shim:

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: `
    <div>
      <header>
        <slot name="header" />
      </header>

      <main>
        <slot name="main" />
      </main>
      <footer>
        <slot name="footer" />
      </footer>
    </div>
  `
}

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')
})

[calebbergman]

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: `
  <div>
    <button v-if="loggedIn" data-test="logoutbtn">Logout</button>
  </div>
  `,
  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>
  <div>
    <button v-if="loggedIn" data-test="logoutbtn">Logout</button>
  </div>
</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

[lmiller1990]

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?

[lmiller1990]

I also get a typing error for this:

const wrapper = mount(Foo, {
  global: {
    config: {
      errorHandler: () => {}
    }
  }
})

I don't really know how to fix these kind of TS errors yet.

[calebbergman]

The project was a fresh CLI project using vue@3.0.0-0. Upgrading to vue@3.0.0-rc.10 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;
}

[lmiller1990]

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?

[pikax]

Problem is caused by:

  footer: {
        template: '<div>Footer</div>'
      }

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

[calebbergman]

@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.

[lmiller1990]

I proposed a fix (well, a work around) in #200. This is really challenging because vue files using a shim do not have any defined types.

[lmiller1990]

I fixed slots thanks to pikax, but data is still problematic. We will talk about it more in #200.