What are the best practices for mocking in Vue.js?

What are the best practices for mocking in Vue.js?

When mocking in Vue.js, it's important to ensure that your mocks accurately represent the components and data they simulate. Use libraries like Jest or Vue Test Utils for effective mocking.

Can you give me an example of how to mock a component?

Sure! You can use shallowMount from Vue Test Utils to mock a component. For example:

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

const wrapper = shallowMount(MyComponent, {
  mocks: {
    $store: { state: { /* your mock state */ } }
  }
});

What about mocking API calls?

For mocking API calls, you can use libraries like Axios Mock Adapter. Here's a quick example:

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

const mock = new MockAdapter(axios);
mock.onGet('/api/data').reply(200, { data: 'mocked data' });

Are there any common pitfalls to avoid?

Yes, avoid over-mocking, which can lead to tests that don't accurately reflect real-world scenarios. Also, ensure your mocks are reset between tests to prevent state leakage.