Wrapper<MyComponent> or Wrapper<InstanceType<typeof MyComponent>>?

Viewed 500

We are using TypeScript + Vue Test Utils v1.0.0 and structuring the jest unit tests of our Vue components like this

import { shallowMount, Wrapper } from '@vue/test-utils';
import MyComponent from './MyComponent.vue';

describe('MyComponent', () => {
  let wrapper: Wrapper<MyComponent>; // solution A
  let wrapper: Wrapper<InstanceType<typeof MyComponent>>; // solution B

  describe('when X', () => {
    beforeEach(() => {
      wrapper = shallowMount(MyComponent, /* ... */);
    });
    it('should do Y', () => {
      // assert some behavior on `wrapper`
    });
  });
});

I am more fond of the solution A because it's more readable, but it appears to produce the wrong type.

Indeed, the return type of shallowMount(MyComponent, /* ... */) is Wrapper<CombinedVueInstance<MyComponent, object, object, object, Record<never, any>>>, which is the same type that Wrapper<InstanceType<typeof MyComponent>> produces.

However, TypeScript does not report any error in either solution, which might indicates that Wrapper<MyComponent> is compatible with the "real" type.

So, my question is: will these types be always compatible? Can I always use the solution A?

0 Answers
Related