How do I test Vue components with Vuex?

How do I test Vue components with Vuex?

To test Vue components that use Vuex, you can use Vue Test Utils along with Jest or Mocha. Start by creating a mock store.

Can you show me an example of a mock store?

Sure! Here's a simple example:

import { createStore } from 'vuex';

const store = createStore({
  state: { count: 0 },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

This creates a basic Vuex store with a count state and an increment mutation.

How do I integrate this mock store into my component tests?

You can use the shallowMount function from Vue Test Utils to mount your component with the mock store. Here's an example:

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

const wrapper = shallowMount(MyComponent, { store });

This allows you to test your component with the Vuex store.