I have the following lifecycle hook in my component:

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

said method calls a decoupled method as the data it requests can be refreshed based on user activity at runtime (ie. switching between "tabs" that each call async data)

In order to get test coverage for the above I wrote the following:

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

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

VTU tells me

[vue-test-utils]: overwriting methods via the methods property is deprecated and will be removed in the next major version. There is no clear migration path for the methods property - Vue does not support arbitrarily replacement of methods, nor should VTU. To stub a complex method extract it from the component and test it in isolation. Otherwise, the suggestion is to rethink those tests.

what is the proposed solution therefore (if there is one/are any), when the given complex method is itself a lifecycle hook?

CodePudding user response：

the below passes my test and the warning no longer appears

[Edit: to clarify, Overview is the component to be tested]

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

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

the same approach should, in theory, work for other instances where the lifecycle hook is calling methods.