How to mock $nuxt object in vue-test-utils and jest

Question

I am using vue-test-utils and jest in order to test my code. My test run without any problem except if it pass through the code below

$nuxt.$store.commit("device/saveState", {
      id: this.$.id,
      key: this.$.ac_key,
      power: this.$.ac_power,
      mode: this.$.ac_mode,
      temp: this.$.ac_temp,
      wind: this.$.ac_wind
    })

and it will give me this error

 [Vue warn]: Error in created hook: "ReferenceError: $nuxt is not defined"

Answer 1

In jest.config.js:

    module.exports = {
      setupFilesAfterEnv: ['<rootDir>/tests/setup.js'],
    }

Then in tests/setup.js:

    global.$nuxt = { 
      refresh: () => {}
    }

Finally, in your tests file:

    const mock: any = jest.fn()
    window.$nuxt.refresh = mock
    
    const wrapper = mount(Component, {
      localVue
    })

    const button = wrapper.find('.refresh-button')
    await button.trigger('click')

    expect(mock).toHaveBeenCalled()

Because it's a global, remember to tear down your mock or reassign it to something else in an afterEach() block.