Bug: Plugins do not extends the VueWrapper type when mounting the wrapper with Typescript

[Spronghi]

Hi,
I was trying the new Plugins for Vue Test Utils 2 with typescript but I noticed that when I create a new method in the Wrapper this is not typed when you use it later.

How To Reproduce
To reproduce try this snippet of code in VS code (version of libs and plugins used are listed below):

import {
  mount,
  VueWrapper,
  config,
  createWrapperError,
  DOMWrapper,
} from '@vue/test-utils';
import { defineComponent } from 'vue';

function DataTestIdPlugin(wrapper: VueWrapper) {
  function findByTestId(selector: string) {
    const dataSelector = `[data-testid='${selector}']`;
    const element = wrapper.element.querySelector(dataSelector);
    if (element) {
      return new DOMWrapper(element);
    }

    return createWrapperError('DOMWrapper');
  }

  return { findByTestId };
}

config.plugins.VueWrapper.install(DataTestIdPlugin);

const Component = defineComponent({
  template: '<div data-testid="awesome">That\'s awesome!</div>',
});

describe('Component.vue', () => {
  it('should ', () => {
    const wrapper = mount(Component);

    const awesomeWrapper = wrapper.findByTestId('awesome'); // Error! findByTestId is not defined in VueWrapper
    expect(awesomeWrapper.exists()).toBeTruthy();
  });
});

Expected behavior
const awesomeWrapper = wrapper.findByTestId('awesome'); should not return an error.

Related information:

• @vue/test-utils version: ^2.0.0-rc.18
• Vue version: ^3.1.0
• node version: v14.18.2
• npm (or yarn) version: 6.14.15
• Volar version: v0.31.4
• Typescript version: ~4.1.5

[cexbrayat]

Hi @Spronghi

Yeah, this is expected: TS has no idea this method is available on VueWrapper. You have to "augment" VueWrapper with the method you add, usually in a d.ts file:

declare module '@vue/test-utils' {
    interface VueWrapper<T> {
        findByTestId: (id: string) => VueWrapper<T>
    }
}

I added some pseudo-code in a TypeScript Playground to give you an idea: https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgEwKYDNgDtUGELgQ5bwC+c6UBcA5AG4CuqNA3AFCiSyJwgQMkANHABqTAOpQAhmDCooccpWo0AAo1QB6GKgDOMALQMYwADa7WbNmgDGpqVFS8IyBqadqN2vYeNmLiGxwwXDYOlDoUjZOYqiSMnJQADwAKgB8gSFZFNjIAEIAnik+AJLIAFxwABTAFXD6UNgA5gCUcAC8GbHxsvKpaUEhpGzDbDZE+nD4hMTw7SgY2HgEkLNVSFhSIKiVNNOrqCQ0ii3sYxPwAO7SvQrzfAIwVftEhzCnbNcJ8gB0mFjIKo0AAWAEYaC1PjdEn9coVivoykDgahTKYIBD2EA

[Spronghi]

Thanks a lot for the pseudo code and sorry for the open non-bug! Loving test-utils and this new functionality!

[empty]

Thanks for this @cexbrayat. It fixed my tests but now whenever I import anything else from @vue/test-utils it says: "Module '"@vue/test-utils"' has no exported member 'DOMWrapper'.ts(2305)". I'm not versed enough with TS to know why this is happening.

[cexbrayat]

@empty Strange. Can you share a small repro so we can take a look?