使用 nuxt.js 和 jest 测试对同一组件中其他函数的调用

Question

我正在尝试编写一个测试来测试对同一文件中其他方法的各种方法调用。到目前为止，我已经为两种不同的方法编写了测试，一种通过了，一种没有通过。

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()
      }
    }

这是到目前为止的测试文件：

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)
      })
})

getAllAvailableImages 测试通过，autoUnpublishOnChange 测试未通过，两者都在同一个文件中。我不确定为什么第二个没有通过。

此外，Nuxt 构建文件系统的方式允许我创建进行实际 api 调用的服务文件，然后我导入这些服务文件以访问 api 调用。我无法弄清楚如何模拟对服务文件的调用。

我问了这两个问题，因为它们都发生在 updateOnDeleteImage 方法中

Answer 1

我明白了。第一个问题，我重组以分离关注点。第二个

这里有一个例子：

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

使用 nuxt.js 和 jest 测试对同一组件中其他函数的调用

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

jestjs

nuxt.js

vue-test-utils