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

Question

I'm trying to write a unit test for the logic within Vue's mounted() lifecycle hook, but not having much luck. The problem seems to be that mounted() never gets called when the component is mounted using vue-test-utils mount. Here's the Vue component I'm trying to test:

<template>
  <div></div>
</template>

<script>   
export default {
  name: 'MyComponent',
  mounted () {
    this.$store.dispatch('logout')
  }
}
</script>

And the test itself:

import { mount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import MyComponent from '@/components/MyComponent'

const localVue = createLocalVue()

localVue.use(Vuex)

describe('MyComponent.vue', () => {
  let store
  let actions

  beforeEach(() => {
    actions = {
      logout: jest.fn().mockName('logout')
    }
    store = new Vuex.Store({
      state: {},
      actions
    })
  })

  it('calls store "logout" action', () => {
    mount(MyComponent, { localVue, store })
    expect(actions.logout).toHaveBeenCalled()
  })
})

However, this fails with expect(logout).toHaveBeenCalled() asserting false.

If I call the mocked store action directly with actions.logout() the test passes, and I have other tests which also call store actions on things like a button press, and those pass as well, so the problem definitely appears to be with the mounted() lifecycle hook.

Any thoughts?

(vue 2.5.4 and vue-test-utils 1.0.0-beta-.15)

Just tested your code with the specified versions and it works. — Emile Bergeron
– Emile Bergeron, Commented May 11, 2018 at 1:52

Yun · Accepted Answer · 2021-10-08 12:25:25Z

8

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()
  })
})

edited Oct 8, 2021 at 12:25

Yun

3,8826 gold badges13 silver badges34 bronze badges

answered Jul 10, 2018 at 16:18

cmasri

4711 gold badge5 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniel Danielecki · Accepted Answer · 2021-04-07 14:13:42Z

1

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();
  });
});

answered Apr 7, 2021 at 14:13

Daniel Danielecki

10.9k7 gold badges89 silver badges111 bronze badges

Comments

gunman · Accepted Answer · 2024-07-09 20:54:11Z

0

Try creating the store instance after executing mount

  //No
const store = new Vuex.Store({ actions });

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


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

const store = new Vuex.Store({ actions });

edited Jul 9, 2024 at 20:54

answered Jul 9, 2024 at 20:53

gunman

12 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related