Typescript error on render with a defineComponent (v6.0)

[Benoit-Vasseur]

Describe the bug A clear and concise description of what the bug is.

Try to call render() on a component define with defineComponent({...}). This error is reported by typescript :

Argument of type 'DefineComponent<{}, {}, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions, ... 6 more ..., {}>' is not assignable to parameter of type 'VueClass<any>'.
  Type 'ComponentPublicInstanceConstructor<any, any, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions> & ComponentOptionsBase<...> & VNodeProps & AllowedComponentProps & ComponentCustomProps' is missing the following properties from type 'VueConstructor<Vue>': extend, nextTick, set, delete, and 9 more.ts(2345)

To Reproduce Steps to reproduce the behavior:

• Create a project from the vue-cli ( typescript + unit test with jest)
• convert the generate test to :

const msg = 'new message'
    render(HelloWorld, {
      props: { msg },
    })
    const elt = await screen.findByText(msg)
    expect(elt).toBeDefined()

Expected behavior

No TS error

Screenshots

Related information:

• @testing-library/vue version: 6.0.0
• Vue version: 3.0

Relevant code or config (if any)

To throw away the error I did a shim for vue-testing--library in my project. I am not a TS expect so i do not kwnow if it is a correct shim

// src/shims-vue-testing-library.d.ts
import { ConfigurationCallback, RenderOptions } from '@testing-library/vue'
import Vue, { DefineComponent } from 'vue'

declare module '@testing-library/vue' {
  export function render<V extends Vue>(
    TestComponent: DefineComponent<{}, {}, any> | VueClass<V>,
    options?: RenderOptions<V>,
    configure?: ConfigurationCallback<V>,
  ): ComponentHarness
}

Thank you for this great wrapper.

I read some issues that worry me about the routing. Can I easily use a real router with vue-testing-library ? Sadly VTU seems to focus on the mock path :/

[afontcu]

Hi!

Looks like you're using Vue 3! As stated in the prerelease, there's no router support yet.

Also types are not updated yet to match the new render() function. I plan on doing so after porting types back from DefinitelyTyped (here is the PR to port them back to VTL for Vue 2)

[Benoit-Vasseur]

@afontcu Thanks for your quick reply :).

Concerning the router, I did a test, it is not the best experience (ts-ignore + router.ready()) but it seems to work :

describe('App', () => {
    test('two routes', async () => {
      router.push('/')
      await router.isReady() // see here : https://vue-test-utils.vuejs.org/v2/guide/vue-router.html#with-a-real-router

      // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
      // @ts-ignore
      render(App, { global: { plugins: [router] } })
      const elt = await screen.findByText('Home')
      fireEvent.click(elt)
      await screen.findByText('Welcome to Your Vue.js App')
      const about = await screen.findByText('About')
      fireEvent.click(about)
      await screen.findByText('This is an about page')
    })
  })

[afontcu]

This conversation might help! https://github.com/vuejs/vue-test-utils-next/issues/152

As soon as we find the best way to deal with vue router in vue test utils, I'll make sure it become available here, too :)

[afontcu]

It is great, though, that our findByXXX helps us overcome a lot of limitations when it comes to async navigation 🎉

[afontcu]

180 should fix this

[github-actions[bot]]

:tada: This issue has been resolved in version 6.2.0 :tada:

The release is available on:

• npm package (@next dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[afontcu]

This should be fixed in next now! It'd be great if you could give it a go and report any other issues :)

Thanks!

[uncleramsay]

Is it possible to get this fix backpatched to version 5? I'm not able to upgrade to Vue 3 yet, but am using defineComponent with Vue2.7 and running into this same issue. Thanks!