I have experience using React Testing Library, but I haven't used Vue Testing Library yet. I want to avoid using mount or shallowMount when testing components in VTL and figure out how to provide a stub instead.
When testing a component like ComponentA, it may include other components like ComponentB and ComponentC. While we might want to render and test interactions between ComponentA and ComponentB, ComponentC may already have its own tests and we prefer not to test it again here. Essentially, we want to "shallow-render" ComponentC while testing ComponentA.
In React Testing Library, this can be achieved by mocking ComponentC:
import * as mockedComponentCModule from '....ComponentC';
jest.spyOn(mockedComponentCModule, 'ComponentC').mockImplementation(() => (
<div data-testid="mocked-component-c" />
));
or alternatively:
jest.mock('path/to/my/ComponentC', () => ({
ComponentC: function ComponentC() {
return <div data-testid="mocked-component-c" />;
}
}));
Thus, rendering ComponentA in React would display ComponentC as a simple div instead of the actual component.
My question now is - how can I achieve this behavior with Vue Testing Library?