6

I am trying to test the methods of my Vue components; the test is seems working fine. But the problem is that it's giving a depreciation warning in the console.

I believe that the vue-test-utils teams would be removing the setMethods and methods property in their next major release.

My problem is that there are no alternative ways to achieve the same things provided for both setMethods and methods property.

Just they suggested a warning:

To stub a complex method extract it from the component and test it in isolation. Otherwise, the suggestion is to rethink those tests.

My Question: How can we extract the method and test the functionalities of the method clicked from the component level or not?

Below is my simple example where I mocked a method and checking if it gets called inside the component when triggered click.

const downloadStub = jest.fn()
const wrapper = mount(Documents, {
  methods: { downloadNow: downloadStub },
})
it('check download button clicked and calling downloadNow method', () => {
  wrapper.find('.download-button').trigger('click')
  expect(downloadStub).toBeCalled()
})

Note: No issues in running the above code; I want to know the alternative ways to achieve the same result and avoid the warning?

Improve this question

1 Answer 1

Reset to default
2

After some research, I found one solution that works the way I expected. I am able to achieve this, without using any methods properties and setMethods.

This way, I got rid of the warning message methods property is deprecated and will be removed.

const wrapper = mount(Documents, {
})
it('check download button clicked and calling downloadNow method', () => {
  const downloadSpy = jest.spyOn(wrapper.vm, 'downloadNow')
  wrapper.find('.download-button').trigger('click')
  expect(downloadSpy).toBeCalled()
})

I use the jest.spyOn method and pass the wrapper.vm and method name.

Other solutions are also welcome.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

While it surely looks clean, does this approach actually stub the method that you want to spy on? I have just encountered the same issue, and in my scenario I would normally stub it since it makes an API call - and I would obviously not want it in my units :)
@MatthewT I haven't tested for something like API call, but would love to check if it's possible or not. This spyOn is good for testing if the function get call or executed during mounted or in any instance.
If the implementation of the method being spied on changes, the test may still pass even though the behavior of the component has changed. This is one of the potential drawbacks of using spies in testing.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.