Test method called in mounted hook Vue class component typescript

Question

I am trying to test that a method is called on mount of Vue component. Fairly new to Vue and Typescript.

export default class App extends Vue {
    mounted () {
        this.deviceId()
        this.ipAddress()
        this.channel()
        this.show()
        this.campaign()
        this.adUnit()
    }

this approach works but I get a warning:

    it('mounted methods are called', async () => {
        
        const deviceId = jest.fn()
        wrapper = shallowMount(App, {
            methods: {
                deviceId
            }
        })
        expect(deviceId).toHaveBeenCalled()
    })

The error:

 console.error node_modules/@vue/test-utils/dist/vue-test-utils.js:1735
      [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.

I have tried using jest spyOn, but I cannot find a way to access the method;

const spy = jest.spyOn(App.prototype, 'methodName')
wrapper = shallowMount(App)
expect(spy).toHaveBeenCalled()

Gives the following error:

 Cannot spy the deviceId property because it is not a function; undefined given instead

The following also doesn't work:

const spy = jest.spyOn(App.methods, 'methodName')

Error:

Property 'methods' does not exist on type 'VueConstructor<Vue>'.ts(2339)

And the following:

        const spy = jest.spyOn(App.prototype.methods, 'deviceId')

Error:

Cannot spyOn on a primitive value; undefined given

I have read in places I may need to define an interface for the component but I am not sure how this works with defining functions inside or if it is necessary?

A. Cancela · Accepted Answer · 2020-07-23 11:06:43Z

1

I've been facing the same issue for a few days, but I've found the way of pointing to the correct method when calling jest.spyOn().

It's a bit tricky but you'll find the methods of your class like this:

const spy = jest.spyOn(App.prototype.constructor.options.methods, 'deviceId');

Note that (even if it might seem obvious, just in case) you'll need to do this before wrapping your component, i.e. like this:

const spy = jest.spyOn(App.prototype.constructor.options.methods, 'deviceId');
wrapper = mount(App, { /* Your options go here */ });

By the way, you don't need to define methods property inside options.

answered Jul 23, 2020 at 11:06

A. Cancela

451 silver badge6 bronze badges

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

6 Comments

Mary Lang Over a year ago

on npm run serve: Property 'options' does not exist on type 'Function'.

A. Cancela Over a year ago

You're right, I'm getting same error. However.. it's weird. I don't know why, first of all, tests has something to do with serve/build the project. Also, I get there just because I was console.logging the object and its properties/methods and actually works (the tests pass and I've verified the method is being called) because the method is actually there.. So I definitely don't know why this should be an error.. at most it should be a warning.. Anyway... I'm afraid then there is no way to test methods right now using jest and Typescript.. seems like a bug, I'll open an issue

A. Cancela Over a year ago

I guess that, until it's solved or we get a better approach.. I'll need to comment it to build/serve the project and uncomment when testing the app...

Mary Lang Over a year ago

Thank you so much for opening an issue, I will continue to dig into it as well.

A. Cancela Over a year ago

Just in case you want to have a look or add something else github.com/vuejs/vue-test-utils/issues/1623

|

keremistan · Accepted Answer · 2020-09-24 10:20:35Z

0

Define your method under the property methods. Only then you can access them from the class.

export default class App extends Vue {
    methods: {
        deviceId(){
            console.log("do your stuff")
        }
    }
}

See here for more examples for the usage of methods

answered Sep 24, 2020 at 10:20

keremistan

4647 silver badges17 bronze badges

Collectives™ on Stack Overflow

Test method called in mounted hook Vue class component typescript

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related