How do I mock components in Vue testing?

How do I mock components in Vue testing?

In Vue testing, you can use libraries like Jest or Vue Test Utils to mock components. Would you like a code example?

Yes, please provide a code example for mocking a child component.

Sure! Here's a simple example:

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

const mockChild = { template: '<div class="mock-child">Mocked Child</div>' };

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

This mocks the ChildComponent in the ParentComponent.

What if I want to mock a method in the child component?

You can use jest.fn() to mock methods. For example:

const mockChild = {
  template: '<div></div>',
  methods: {
    myMethod: jest.fn()
  }
};

This way, you can track calls to myMethod during your tests.