How can I mock components in Vue tests?

How can I mock components in Vue tests?

You can use libraries like Vue Test Utils along with Jest to mock components in your Vue tests.

Can you show me an example of mocking a child component?

Sure! You can use the shallowMount method from Vue Test Utils to mock child components. Here's a simple example:

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

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

This will mock the ChildComponent when testing ParentComponent.

What if I want to mock a component with props?

You can pass props to the stubbed component like this:

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

This way, you can control the props that the mocked component receives.

Are there any best practices for mocking in Vue tests?

Yes! Some best practices include mocking only what you need, keeping your mocks simple, and ensuring your tests remain readable.