在 vue test utils 中的 `mounted` 生命周期钩子中测试方法调用，现在`methods`已被弃用，将在下一个主要版本中删除答案

【问题标题】：testing method calls in `mounted` lifecycle hook in vue test utils now that `methods` is deprecated and will be removed in next major version在 vue test utils 中的 `mounted` 生命周期钩子中测试方法调用，现在`methods`已被弃用，将在下一个主要版本中删除
【发布时间】：2022-01-30 07:00:15
【问题描述】：

我的组件中有以下生命周期钩子：

  async mounted () {
    await this.fetchTabData()
  },

所述方法调用解耦方法，因为它请求的数据可以根据运行时的用户活动刷新（即在每个调用异步数据的“选项卡”之间切换）

为了获得上述的测试覆盖率，我写了以下内容：

describe('mounted', () => {
    test('test', async () => {
      const fetchTabData = jest.fn()
      wrapper = await shallowMount(Overview, {
        store: new Vuex.Store({ ... }), 
        ...
        methods: { fetchTabData }
      })

      expect(fetchTabData).toHaveBeenCalled()
    })
  })

VTU 告诉我

[vue-test-utils]：通过methods 属性覆盖方法已被弃用，将在下一个主要版本中删除。 methods 属性没有明确的迁移路径——Vue 不支持任意替换方法，VTU 也不支持。要存根一个复杂的方法，从组件中提取它并单独测试它。否则，建议重新考虑这些测试。

当给定的复杂方法本身是一个生命周期钩子时，建议的解决方案是什么（如果有的话）？

【问题讨论】：

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

【解决方案1】：

下面通过了我的测试，警告不再出现

[编辑：澄清一下，Overview 是要测试的组件]

describe('mounted', () => {
    test('test', async () => {
      const fetchTabData = jest.fn()
      Overview.methods.fetchTabData = fetchTabData
      wrapper = await shallowMount(Overview, {
        store: new Vuex.Store({ ... }), 
        ...
      })

      expect(fetchTabData).toHaveBeenCalled()
    })
  })

理论上，同样的方法应该适用于生命周期钩子调用方法的其他实例。

【讨论】：