How can I mock components in Vue Test Utils?

How can I mock components in Vue Test Utils?

You can use the shallowMount function to mock child components in Vue Test Utils. This allows you to isolate the component you're testing.

Can you show me an example of how to use shallowMount?

Sure! Here's a simple example:

import { shallowMount } from '@vue/test-utils';
import MyComponent from '@/components/MyComponent.vue';
import ChildComponent from '@/components/ChildComponent.vue';

const wrapper = shallowMount(MyComponent, {
  stubs: { ChildComponent }
});

This will mock ChildComponent when testing MyComponent.

What if I want to mock a component with props?

You can pass props to the stubbed component like this:

const wrapper = shallowMount(MyComponent, {
  stubs: {
    ChildComponent: {
      template: '<div />',
      props: { myProp: 'value' }
    }
  }
});

Are there any limitations to using shallowMount?

Yes, shallowMount does not render child components fully, which means you won't be able to test their internal behavior. Use mount for full rendering.