0

I've been looking through https://vue-test-utils.vuejs.org/guides/#testing-key-mouse-and-other-dom-events to learn how to write tests using Jest combined with vue-test-utils. However, these examples all use a shallowMount where you mount the component, but I want to avoid that as I use GUI tests to test the actual components.

However, I'm having issues doing this without the component. In the examples from vue-test-utils they use shallowMount to inject the store, but as I'm not doing that I can't access my store, which means that my state, my getters etc all are undefined when testing.

My store testing file myStore.spec.js:

import { createLocalVue } from '@vue/test-utils';
import myStore from './myStore';
import Vuex from 'vuex';

const localVue = createLocalVue();

localVue.use(Vuex);

describe('myStore tests', () => {
  let actions;
  let getters;
  let store;

  beforeEach(() => {
    actions = {
      setInUse: jest.fn(),
    };

    getters = {
      isInUse: () => false,
    };

    store = new Vuex.Store({
      modules: {
        myStore: {
          state: {
            isInUse: false,
          },
          actions,
          getters: myStore.getters,
        },
      },
    });
  });

  it('example test', () => {
    actions.setInUse(true);
    expect(getters.isInUse(state)).toBeTruthy();
  });
});

and one of the errors when running this test is: state is not defined.

Where am I going wrong? How should I access my store in my tests? Ideally I want to set my test store to the same as what I import from myStore, but I'm not sure that works?

  • Is state not supposed to be part of the variables in describe? `let actions; let getters; let store; let state;` – nara_l Oct 21 '18 at 01:16
  • 1
    I wrote a blog post about how to test a store—https://eddyerburgh.me/how-to-unit-test-a-vuex-store – Edward Nov 23 '18 at 18:21

0 Answers0