vue-test-utils: How to test logic within mounted() lifecycle hook (with vuex)? vue-test-utils: How to test logic within mounted() lifecycle hook (with vuex)? vue.js vue.js

vue-test-utils: How to test logic within mounted() lifecycle hook (with vuex)?


Not sure how it's any different, but I abstracted the store mock to another file and everything seems to work now.

mocks.js

export const storeMock = Object.freeze({  state: {},  actions: {    logout: jest.fn().mockName('logout')  },})

test.spec.js

import { shallowMount, createLocalVue } from '@vue/test-utils'import Vuex from 'vuex'import { storeMock } from './mocks.js' import MyComponent from '@/components/MyComponent'const localVue = createLocalVue()localVue.use(Vuex)describe('MyComponent.vue', () => {  let options  beforeEach(() => {    jest.clearAllMocks()    const store = new Vuex.Store(storeMock)    options = { store, localVue }  })  it('calls store "logout" action', () => {    shallowMount(MyComponent, options)    expect(storeMock.actions.logout).toHaveBeenCalled()  })})


Without abstracting the store mock to another file, and slightly different approach without beforeEach (ruined my tests for some reason).

import { createLocalVue, shallowMount } from "@vue/test-utils";import Vuex from "vuex";import MyComponent from "@/components/MyComponent.vue";describe("MyComponent", () => {  const localVue = createLocalVue();  localVue.use(Vuex);  const actions = {    logout: jest.fn()  };  const store = new Vuex.Store({ actions });  const wrapper = shallowMount(MyComponent, {    localVue,    store  });  it('calls store "logout" action', () => {    expect(actions.logout).toHaveBeenCalled();  });});