Jest + Nuxt + Nuxt-Fire is failing in test suite

user_4375086 0
Viewed 275

I'm using Nuxt with Nuxt-Fire (https://github.com/lupas/nuxt-fire)

When I launch my test I get this error [Vue warn]: Error in config.errorHandler: "TypeError: Cannot read property 'ref' of undefined"

This is happening because of this section in my App

mounted() {
    this.initiate(window.instaroomId)

    let connected = this.$fireDb.ref(".info/connected")
    this.getConnection(connected)
},

It looks like the this.$fireDb is not called. The module is normally loaded in nuxt.config.js. How can I make this work?

vuejs2 nuxt.js vue.js jestjs
1 Answers

If you want to test, that this.$fireDb.ref(".info/connected") was called you can mock it like this:

import { shallowMount } from '@vue/test-utils'
import SomeComponent from '@/components/SomeComponent/SomeComponent.vue'

let wrapper

describe('SomeComponent.vue Test', () => {
  beforeEach(() => {
    wrapper = shallowMount(SomeComponent, {
      mocks: {
        $fireDb: {
          ref: jest.fn()
        }
      }
    })
  })
  it('$fireDb.ref was called', () => {
    expect(wrapper.vm.$fireDb.ref).toBeCalled()
    expect(wrapper.vm.$fireDb.ref).toBeCalledWith('.info/connected')
  })
})

Or if you want the test just to pass created() hook and test another functionality you can just mock $fireDb.ref without testing that it was called.

user_150042990
Related