Testing call to other functions within the same component using nuxt.js and jest

Question

I'm trying to write a test that tests the various method calls to other methods within the same file. So far, I've written tests for two different methods, one passes, one does not.

async updateOnDeleteImage() {
      try {

        this.getAllAvailableImages()
        let result = await SliderService.getSlideInformation(this.currentSlide)
        this.slideData = result
      } catch (error) {
        console.error(error)
      } finally {
        this.autoUnpublishOnChange()
        this.refreshPreviewBox()
      }
    }

and here is the test file thus far:

import { shallowMount, createLocalVue } from '@vue/test-utils'
import ControlsBoxRight from '@/components/pages/slider-manager/controls-box-right'
import Vuetify from 'vuetify'
import Vuex from 'vuex'
let vuetify
describe('Test slider manager controls box', () => {
  const localVue = createLocalVue()
  let wrapper
  localVue.use(Vuex)

  const currentSlideMock = jest.fn()
  currentSlideMock.mockReturnValue(1)
  const store = new Vuex.Store({
    getters: {
      getSelectedSlide: currentSlideMock
    }
  })
  beforeEach(() => {
    vuetify = new Vuetify()
  })
    test('updateOnDeleteImage calls getAllAvailableImages', async () => {
      wrapper = shallowMount(ControlsBoxRight, {
        localVue,
        store,
        propsData: {
          slideId: 1
        },
      })
      wrapper.vm.getAllAvailableImages = jest.fn()
      wrapper.vm.updateOnDeleteImage()
      wrapper.vm.$nextTick()
      expect(wrapper.vm.getAllAvailableImages.mock.calls.length).toBe(1)
    })
        test('updateOnDeleteImage calls get autoUnpublishOnChange', async () => {
        wrapper = shallowMount(ControlsBoxRight, {
          localVue,
          store,
          propsData: {
            slideId: 1
          },
        })
        wrapper.vm.autoUnpublishOnChange = jest.fn()
        wrapper.vm.updateOnDeleteImage()
        wrapper.vm.$nextTick()
        expect(wrapper.vm.autoUnpublishOnChange.mock.calls.length).toBe(1)
      })
})

the test for getAllAvailableImages passes, the autoUnpublishOnChange test does not, both are within the same file. I'm not sure why the second isn't passing.

Additionally, the way Nuxt structures the file system allows me to create service files that make the actual api calls, and I then import those service files to access the api calls. I'm having trouble figuring out how to mock a call to a service file.

I ask both questions because they both happen within the updateOnDeleteImage method

Answer 1

I figured it out. The first problem, I restructured to separate away concerns. for the second

here is an example:

import UserService from '@/services/UserService'
jest.mock('@/services/UserService')