单元测试，检查函数是否被调用答案

【问题标题】：Unit tests, check if function have been called单元测试，检查函数是否被调用
【发布时间】：2021-05-28 12:48:04
【问题描述】：

我需要实现一个测试，检查按钮单击时是否调用了函数

onSave (e) {
 this.$qiwaApi.createDimension()
   .then(() => {})
   .catch(err => this.showSnackbar(err.message))}

我需要测试函数 createDimension。在我的测试中，我嘲笑了它

const createComponent = () => {
    wrapper = mount(dimensions, {
      store,
      localVue,
      mocks: {
        $qiwaApi: {
          createDimension: function (e) {
            return new Promise((resolve) => { resolve({}) })
          }
        }
      },
      router
    })
  }

项目中，函数是这样导出的

export default $axios => ({
  createDimension (data, surveyId) {
    return $axios.post(`/lmi-admin/surveys/${surveyId}/dimension`, {
      data: {
        attributes: {
          ...data
        }
      }
    })
  }
})

我希望这个测试能够奏效。但是由于某种原因 wrapper.qiwaApi 或 wrapper.createDimension 返回 undefined

expect(wrapper.$qiwaApi.createDimension).toHaveBeenCalled()

【问题讨论】：

标签： vue.js unit-testing vue-test-utils

【解决方案1】：

包装器不会以这种方式提供对您的模拟的访问。

您必须持有对 jest.fn() 的引用，然后直接验证对该引用的调用，而不是尝试将其拉出包装器：

it('calls createDimension on button click', async () => {
  const createDimension = jest.fn(() => Promise.resolve())
  const wrapper = mount(dimensions, {
    mocks: {
      $qiwaApi: {
        createDimension
      }
    }
  })

  await wrapper.find('[data-testid="save"]').trigger('click')
  expect(createDimension).toHaveBeenCalled()
})

demo

【讨论】：