使用 Vue Test Utils 将模拟方法传递给 mount/shallowMount答案

【问题标题】：Passing mocked methods to mount/shallowMount using Vue Test Utils使用 Vue Test Utils 将模拟方法传递给 mount/shallowMount
【发布时间】：2020-01-02 11:28:54
【问题描述】：

有人可以向我解释为什么在methods 对象中传递给shallowMount 的模拟函数不能通过包装对象在测试中访问，而是必须首先创建一个变量作为对模拟函数？

我已经尝试了 mount 和 shallowMount，created/mounted hooks 以及直接调用函数而不是 created/mounted hook。

// TestComponent.spec.js

import TestComponent from '@/components/TestComponent'
import { shallowMount, createLocalVue } from '@vue/test-utils'

const localVue = createLocalVue()

const setLoadingMock = jest.fn() // mock function that is accessible in the test

function createWrapper () {

  const defaultMountingOptions = {
    localVue,
    methods: {
      setLoading: setLoadingMock
    }
  }

  return shallowMount(TestComponent, defaultMountingOptions)
}

describe('TestComponent.vue', () => {

  let wrapper

  beforeEach(() => {
    wrapper = createWrapper()
  });

  it('will call setLoading', () => {
    expect(wrapper.vm.setLoading).toHaveBeenCalled() 
    // FAILS. Console message:
    // Matcher error: received value must be a mock or spy function

    // Received has type:  function
    // Received has value: [Function bound mockConstructor]
  })

  it('will call setLoading', () => {
    expect(setLoadingMock).toHaveBeenCalled() // PASSES
  })
})

TestComponent.vue

export default {
  name: 'TestComponent',
  mounted () {
    this.setLoading()
  },

  methods: {
    setLoading () {
      console.log('Original method'); // Never logs
    }
  }
}

【问题讨论】：

如果我将setLoading: setLoadingMock 替换为setLoading: () => {}，也会遇到同样的问题

标签： vue.js jestjs vue-test-utils

【解决方案1】：

mount 或 shallowMount 在这种情况下并不重要。 mount 表示 test 将挂载组件及其子组件，而 shallowMount 将仅挂载组件并存根其子组件。

您正在模拟setLoading 方法，这意味着您正在用模拟替换原始方法。这意味着，当调用 setLoading 方法时，它不会运行您组件中的代码，而是运行测试模拟中的代码 - 在本例中为 jest.fn()。

模拟的目的是检查被模拟的方法是否被正确调用。

另外，wrapper.vm.setLoading 调用setLoading 方法。

【讨论】：

如果我用setLoading: () => {} 替换setLoading: setLoadingMock，如果我运行，我会收到与上面相同的错误消息：expect(wrapper.vm.setLoading).toBeCalled()。也许你知道如何克服这个？

【解决方案2】：

您应该监视方法，而不是引用包装器实例，例如：

const setLoading = jest.spyOn(wrapper.vm, 'setLoading');
expect(setLoading).toHaveBeenCalled() ;

【讨论】：