Accessing component methods for unit testing using typescript is not working

[t0nyak]

Subject of the issue

When using TypeScript in Vue.js project and Jest for testing, I'm trying to implement unit testing and I am able to test everything within a component but its methods.

I'm using Wrapper and mounting the component (I've used both mount and shallowMount ways, both of them works for different purposes but none of them let me access the methods defined inside my component).

I think it's a bug since I'm able to access every element of the component instance through wrapper.vm... like:

• wrapper.vm.$data.myVar
• wrapper.vm.$props...
• wrapper.vm.$router...
• wrapper.vm.$children...
• wrapper.vm.$emit...

And I can even do the same with inner components and all of them work properly. However, when I want to use jest.spyOn to check if the method is called, what returns, etc. I'm not able to do that.

I've tried next things passed to jest.spyOn(), but none of them works:

• Access it through const myMethod = jest.spyOn(wrapper.vm.$options.methods, 'myMethod'); and later update the wrapper (to know I'm spying on the method), but it doesn't work
• Access it using const myMethod = jest.spyOn(Component.prototype, 'myMethod'); but it gets undefined
• Use const myMethod = jest.spyOn(Component.methods, 'myMethod'); but then I'll get Property 'methods' does not exist on type 'VueConstructor<Vue>'.ts(2339)
• Finally, using const myMethod = jest.spyOn(Component.prototype.methods, 'myMethod'); and also I get Cannot spyOn on a primitive value; undefined given

In summary, accessing it anywhere to pass it to spyOn methods gets undefined. Also tried pass it as method when mounting the instance like this but I also get an error:

const myMethod = jest.fn()
wrapper = shallowMount(App, {
    methods: {
        myMethod
    }
})
. . . // Perform any actions needed to trigger the method call
expect(myMethod).toHaveBeenCalled()

In the other hand, I've tried both defining it inside the component as a common method inside any TypeScript class, and also to define it inside the options of @Component decorator of vue-property-decorator like this:

@Component({
    methods: {
        myMethod: () =>  { ... }
    }
})

I've only a way of doing it "work" which is using this tricky thing: const myMethod = jest.spyOn(Component.prototype.constructor.options.method, 'myMethod');, but it's a ugly workaround and it's actually not valid since, although it tests properly my methods, later when I try to build or serve the application it throws an error:

Property 'options' does not exist on type 'Function'.

Steps to reproduce

1. Create a new Vue.js project with CLI using TypeScript
2. Create any method inside any component (it's ok use the root component)
3. Bind the method to some interaction in the component like clicking a button, or even just in some of the hooks like mounted()
4. Try to spy it using jest.spyOn() with the method or pass it to the mount() method to test it has been called

I leave also this link to StackOverflow from another person experiencing this problem: https://stackoverflow.com/questions/63001188/test-method-called-in-mounted-hook-vue-class-component-typescript/63052803?noredirect=1#comment111510952_63052803

Expected behaviour

I think it should be some bug when setting/binding the methods existing in the component to the methods option, since it is possible to access any of the options, data, props, etc. using wrapper.vm and wrapper.vm.$options.methods does not work.

Said this, the expected behaviour would be being able to access any defined methods through wrapper.vm.$options.methods as any other property.

Also, having it accessible through Component.prototype would be ok.

Actual behaviour

The methods are not found and it gets undefined when tries to spy it or check they were called.

Possible Solution

I think the problem when using jest.spyOn(Component.prototype, 'myMethod'); is just that as the Component extends Vue class, it's being seen as an instance of Vue and it actually has no method myMethod. Maybe just setting type of Component exactly to the actual class (child) of the Component would do the work.

In the other hand, I think the problem with mount is that when mounting the component, the property wrapper.vm.$options.methods is not being set correctly. It should check any methods inside the body of the component and assign them to that property and/or looking for the methods property inside the component/decorator and assign them.

[lmiller1990]

This is not a bug - methods is not a supported mounting option. The full list of supports options is here.

What you are trying to do isn't ideal anyway - rather than test to see if a method was called, make an assertion against what action/behavior is triggered when said method is called.

Is there a specific test you are trying to write? What is your use case? If it's just trying to test every method in isolation, consider rethinking your tests - testing implementation details should be avoided, test the component in terms of inputs/outputs (basically, user interactions with trigger and assertions against the rendered template).

[t0nyak]

I know methods is not a supported mounting option, what I'm trying to figure out is how would be the right way of accessing existing methods of a component within a test.

If it's supposed not to access them at all during testing, then I think it's confusing why even exists wrapper.vm.$options.methods property (for instance) or what's supposed to use that for? What can I expect to find there and which could be a use case to access that property?

In the other hand, if the ideal way of testing components is to check inputs/outputs without taking into account methods calls itself, then why also exist typical toHaveBeenCalled() assertions and similars?

Anyway, I'll try to do what you suggests for my tests right now, but I think definitely methods should be accessible somehow from tests since it is a property of Vue components (as it is props or data). If a dev is mounting a component, I guess he/she expects to have mounted the whole component, not to leave out some parts of them.

BTW, my use case is just a simple login process, where I expect some methods to be triggered after some actions (like validation methods or even just some onSubmit method). Since it is unit testing, I don't want to test "side efects" of onSubmit method, because that would be integration testing (I mean, because onSubmit methods deals with new components/modules of my app, not just with my component)

[lmiller1990]

why even exists wrapper.vm.$options.methods

This is actually not a Vue Test Utils thing - vm is the Vue instance, anything there comes directly from Vue. I guess that is just where Vue stores methods.

Things like toHaveBeenCalled are also not part of Vue Test Utils, but Jest (the test runner). There are times where you want to use this, though. One example might be if you have a method that makes an API call, and you want to mock the axios HTTP client for example:

<template>
  <button @click="fetchData" />
</template>

<script>
import axios from 'axios'
export default {  
  props: ['id'],
  methods: {
    fetchData() {
      axios.get(`/api/posts/${this.id}`)
    }
}
</script>

You might mock axios and test like this:

const mockGet = jest.fn()
jest.mock('axios', () => ({
  get: (url) => {
    mockGet(url)
  }
}))
test('makes api call', () => {
  const wrapper = mount(Component, { propsData: { id: 4 } })
  wrapper.find('button').trigger('click')
  expect(mockGet).toHaveBeenCalledWith('api/posts/4')
})

Regarding accessing methods: they are as accessible as they are in a Vue app: VTU just wraps the vm, if you want more access you most likely would need to open an issue in Vue (I'm sure these are intentionally not accessible from outside, though).

If you can share your example with your login form, I can provide some examples. Instead of spying on your methods, try spying on whatever they call (axios, Vuex action, whatever). There is also a module "vuex-mock-store" which you could try out.

Hope this helps!

[vladiiliev]

Hey guys, I found a way to make it work. It's a little bit hacky but actually works.

import YourComponent from 'views/components/YourComponent.vue';
import { shallowMount, Wrapper } from '@vue/test-utils';

let wrapper: Wrapper<YourComponent>;

const spy = jest.spyOn(
    new YourComponent() as {
        yourMethod: () => void; // method type
    },
    'yourMethod'
);
wrapper = shallowMount(YourComponent);

[lmiller1990]

The fact you had to hack it so hard to make it work is a code smell - there is really not reason to write tests like this in the first place. These tests are brittle and will often give you false confidence. Assert against the DOM or something else - if you are stubbing that much out, what are you really testing at the end of the day?

[vladiiliev]

The fact is, there is no other way to make it work. Or do you have a better solution? If so, please publish it so I don't waste any more time, as the docs are absolutely not clear for such cases.

[lmiller1990]

Just don't stub your method - test against what it does, not that it's called. I am not sure what your use case is, so I can't advise any more.

Up to you though.

[vladiiliev]

Thanks for the reply. So you suggest not touching the methods in any form of the test?

[lmiller1990]

I think there is no one-size-fits-all solution. If you have a specific, real example, happy to advise, but in my general experience the more you stub the less you end up actually testing.

Of course it will vary from situation to situation. A simple example I often is something like this:

<template>
  <button @click="getData" />
</template>

<script>
import axios from 'axios'

export default {
  data() {
    query: 'query'
  },
  methods: {
    getData() {
      axios.get(`/api/v1?query=${this.query}`)
    }
  }
}
</script>

Way back we used to support methods as a mounting option. People would do this:

const getData = jest.fn()
const wrapper = mount(Foo, {
  methods: {
    getData
  }
})

wrapper.find('button').click()
expect(getData).toHaveBeenCalled()

This test is basically useless - if you delete getData from the component, everything still passes. You basically re-implemented your component in your test.

Since methods is now deprecated, you sometimes see people using a spy, which is slightly better. Test is something like:

const wrapper = mount(Foo)
const spy = jest.spyOn(wrapper.vm, 'getData')
wrapper.find('button').click()
expect(spy).toHaveBeenCalled()

Great, but we can do better. What if you want to assert the correct URL was used in the http request? How about ensuring the correct query is appended? If you change from /api/v1 to /api/v2, this test will not fail. Uh oh - false positive. You are testing something different to what your component actually does.

What I think is better is to mock a lower layer. As low as possible. So we might mock axios, instead:

const mockGet = jest.fn()
jest.mock('axios' () => ({
  get: () => mockGet()
})

const wrapper = mount(Foo, { 
  data() {
    query: 'some-query'
  }
})
wrapper.find('button').click()
expect(mockGet).toHaveBeenCalledWith('/api/v1?query=some-query')

Now we get more coverage, and can assert the correct endpoint and query are used. Great! Hopefully you find this useful. Everyone has their own opinions on testing, this is just what I've arrived at after writing tests after many years. I used to use methods and spies more often, but ended up deploying broken code since those tests were giving me false positives. This burned me hard and taught me to write good, reliable tests that mock less and test more.

If you are interested I talk about this topic a little more in this video.

[vladiiliev]

Thanks for the detailed explanation!