how to mock 'mounted' method of VueJs component?

Question

Thanks for you help in advance.

How is the mounted() method mocked for testing?

The Component is like this:

export default {
    
    name: 'ShowToDo',
    ...
    mounted(){
        this.$store.dispatch('download_todo')
    },
    ...
}

Instead, the Component-test is:

  const localVue = createLocalVue()
        localVue.use(Vuex)
        wrapper = mount(ShowToDo, {
            store,
            localVue,
            mounted(){}
            }
        )
    })

It seems that mounted(){} is ignored, because the test try to execute this.$store.dispatch('download_todo') .

Thanks in advance.

does this answer your question: stackoverflow.com/questions/55746890/… ? — Igor Moraru
– Igor Moraru, Commented Jul 5, 2021 at 11:33

Kapcash · Accepted Answer · 2021-07-05 11:33:29Z

1

Sorry, but you can't mock Vue lifecycle hooks.

Source: vue-test-utils issue #166

What you can do though it mocking your store. Instead of using your real store, you can provide one with a custom download_todo declared action.

So the mounted hook will be run and dispatch the download_todo action, but it will be a custom one :)

import { state, mutations, getters, actions } from '../store'

const downloadActionMock = jest.fn()
const store = new Vuex.Store({
  state,
  mutations,
  getters,
  actions: {
    ...actions, // Use the real actions
    download_todo: downloadActionMock // Override some of them
  }
})

wrapper = mount(ShowToDo, {
    store,
    localVue,
  }
)

expect(downloadActionMock).toHaveBeenCalled()

answered Jul 5, 2021 at 11:33

Kapcash

6,9822 gold badges22 silver badges47 bronze badges

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

1 Comment

sam Over a year ago

I have moved the this.$store.dispatch('download_todo') in the init function inside methdos, then I mocked this method.

Eduardo · Accepted Answer · 2021-07-05 12:38:58Z

1

You can't assert that lifecycle hook was called but you can assert the $store.dispatch was called. I suggest you to not use real Vuex store at all. One of the best practices is to test the store separately mocking the $store object in components. With mock $store you can not just check that the action was dispatched but also check what arguments it was dispatched with:


const wrapper = mount(ShowToDo, {
   mocks: {
     $store: {
       dispatch: jest.fn()
     }
   },
})
expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith('download_todo')

answered Jul 5, 2021 at 12:38

Eduardo

1,3311 gold badge8 silver badges22 bronze badges

Collectives™ on Stack Overflow

how to mock 'mounted' method of VueJs component?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related