Mock mounted hook Jest testing unit

Question

I am doing some unit testing for components. However, in some components, I have something running on the mounted hook that is making my test fail. I have managed to mock the methods that I do not need. However, I was wondering if there is a workaround mocking the mounted hook itself.

@/components/attendeesList.vue

<template>
  <div>
    <span> This is a test </span> 
  </div>
</template>

JS

<script>
methods: {
    testMethod: function() {
        // Whatever is in here I have managed to mock it
    }
},

mounted: {
    this.testMethod();
}
</script>

Test.spec.js

import { mount, shallowMount } from '@vue/test-utils'
import test from '@/components/attendeesList.vue'

describe('mocks a method', () => {    
  test('is a Vue instance', () => {
  const wrapper = shallowMount(attendeesList, {
    testMethod:jest.fn(),
  })
  expect(wrapper.isVueInstance()).toBeTruthy()
})

tony19 · Accepted Answer · 2020-10-15T20:43:17.593

9

Currently, vue-test-utils does not support mocking lifecycle hooks, but you can mock the method called from the mounted hook. In your case, to mock testMethod(), use jest.spyOn:

const testMethod = jest.spyOn(HelloWorld.methods, 'testMethod')
const wrapper = shallowMount(HelloWorld)
expect(testMethod).toHaveBeenCalledWith("hello")

edited Oct 15 '20 at 20:43

answered Apr 19 '19 at 08:03

tony19

125,647
18
229
307

score 0 · Answer 2 · answered Apr 18 '19 at 13:28

0

Vue test utils has a built in way to mock methods -

const wrapper = shallowMount(attendeesList,{
   testMethod:jest.fn()
})

the simplest way to solve your problem is to move the code in the mounted hook into a method, stub that using the code above and call it from your hook.

answered Apr 18 '19 at 13:28

Alon Bar David

1,757
14
15

Wouldn't be too late to stub it?? Since the mounted hook runs before it gets the stub? – heyr Apr 18 '19 at 13:36
when using mocked methods via shallowMount the methods are overridden before the mounted hook is called. – Alon Bar David Apr 18 '19 at 15:59
Could you check my updated post, please? I get the exact same error, to be honest. What am I doing wrong? – heyr Apr 18 '19 at 16:16
Replacing methods is no longer supported by vue-test-utils as of 2021 – Matt Sanders Jul 02 '21 at 22:06

Mock mounted hook Jest testing unit

2 Answers2

Linked