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"

I am using vue-mc, the code above is for vue-mc and I can only access "this" by using "$nuxt". — Johji, Jun 16 '20 at 07:38
I'm sorry if its confusing but in vue-mc $nuxt is the equivalent of this. — Johji, Jun 16 '20 at 07:39
@4thyearstupident I'm having the same problem. Did you happen to find a solution? — RudyOnRails, Feb 12 '21 at 17:31

score 0 · Answer 1 · answered Apr 22 '22 at 21:35

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.

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

1 Answers1