What is WrapperLike type?

[kensodemann]

With RC.18, a findComponent(QuerySelector) now returns a WraperLike object instead of a VueWrapper object, resulting in TypeScript errors such as Property 'trigger' does not exist on type 'WrapperLike'.

To get around this, I can case the wrapper as such:

      const button = wrapper.findComponent('[data-testid="cancel-button"]');
      await (button as VueWrapper).trigger('click');

But that seems like a pretty weird thing to have to do.

Is this intended behaviour?

I believe in RC.17, this same findComponent() call would have returned a VueWrapper object and would have have been typed as WrapperLike.

[cexbrayat]

Hi @kensodemann
Thank you for opening a discussion.

As you can see here https://github.com/vuejs/vue-test-utils-next/blob/b118e9aa956a81997dc1276583c0f48c5a767387/src/interfaces/wrapperLike.ts#L33-L46 it depends what you pass as a selector. As you chose to use a string to find your component, it returns a WrapperLike interface (common interface between VueWrapper and DOMWrapper). If you use wrapper.findComponent(CancelButton) it'll work as expected I guess?

cc @xanf as he is the author of this recent refactoring, and he might have more insight.

[xanf]

@kensodemann WrapperLike means we can't guarantee if it will be a VueWrapper or DOMWrapper (functional components return DOMWrapper). But great catch - trigger should be available on WrapperLike interface too

[kensodemann]

@xanf - I assume it should contain anything in BaseWrapper since those methods will be common between VueWrapper and DOMWrapper in which case it is missing the signatures for classes, isVisible, text, and trigger (perhaps others, but those are the ones I saw in a quick scan).

I can PR that if you wish, or create an issue from this discussion, or both. Whatever works best for this team.

[xanf]

@kensodemann contributions are always welcome :)

[kensodemann]

@xanf : #1180