How to check for WrapperLike type

[moohere]

We wrote a plugin which requires us to check for 'WrapperLike', but this type isn't exported.

How would you guys propose we check for this?

[cexbrayat]

Yeah I don't think this interface is exported. You have access to BaseWrapper or VueWrapper which are the actual implementations.
If that's not enough and you have a compelling use case that you can share, open an issue and we'll take a look at adding it to the public API or not.

[moohere]

Typescript is recognizing that the possible type is WrapperLike | DOMWrapper<Element>, as seen in attached screenshot. I tested it with BaseWrapper, but it seems to give the same warning as VueWrapper and DOMWrapper (which I've originally tried).

[cexbrayat]

Can you provide us a small repro online using https://stackblitz.com/github/vuejs/create-vue-templates/tree/main/typescript-vitest?file=src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts ?

We'll be able to take a look

[moohere]

Yes of course, here you go: https://stackblitz.com/edit/github-kyyrdv?file=vitest.setup.ts. Note the findByTestId type check underline

[cexbrayat]

Ha yes I understand why. You're trying to find components using a string selector, which loses all type-safety and returns a WrapperLike.

You can make it work with something like:

function testIdPlugin(wrapper: VueWrapper | DOMWrapper<Node>): {
  findByTestId: (name: string, isComponent: boolean) => BaseWrapper<Node>;
} {
  return {
    findByTestId(name: string, isComponent: boolean) {
      return isComponent
        ? wrapper.findComponent(`[data-test-id='${name}']`) as BaseWrapper<Node>
        : wrapper.find(`[data-test-id='${name}']`);
    }
  };
}

But to be honest with you, I think you're shooting yourself in the foot by trying to do this if you care about type safety.
The "type-safe way" to find a component is by using its type rather than a CSS selector. That way, you get a properly typed VueWrapper, with its vm reflecting its proper type.

[moohere]

Thank you for your quick replies - much appreciated!

We actually don't write our tests in TypeScript so we never check for types there, we simply rely on these CSS selectors to fetch the components to test functionalities in our unit tests. So the solution you offered above works for us even if it's not the ideal type-safe way.

Should we one day start writing our tests in TS, I'll definitely bring up your comment about finding components by using its type instead. Thank you! 😄