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?