How can I call VueJS method in jest of typescript?

Question

I'm writing test code in VueCLI with TypeScript and Jest.

I called Vue file's method to test the method.

However, an error has occurred as follows.

HelloWorld.vue:

<template>
    <div class="hello">
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
    public testMethod() {
        return true;
    }
}
</script>

<style scoped lang="scss">
</style>

example.spec.ts:

import { shallowMount } from '@vue/test-utils';
import HelloWorld from '@/components/HelloWorld.vue';

describe('HelloWorld.vue', () => {
    it('testMethod', () => {
        const wrapper = shallowMount(HelloWorld, {
            propsData: { 'test' },
        });
        expect(wrapper.testMethod()).toBeTruthy();
    });
});

An error occurred after unit test command execution.

tests/unit/example.spec.ts:9:20 - error TS2551: Property 'testMethod' does not exist on type 'Wrapper<CombinedVueInstance<Vue, object, object, object, Record<never, any>>>'. Did you mean 'setMethods'?
9 expect(wrapper.testMethod()).toBeTruthy();

Why can't the test call the methods in Vue JS?

Answer 1

try this way

 expect(wrapper.vm.testMethod).toBe(true);

Answer 2

The issue has to do with the type being associated with your const wrapper. I had the same problem and solved for this by saying:

let wrapper: any
...
wrapper = shallowMount(HelloWorld, {
            propsData: { 'test' },
        });

This allowed me to then make references to defined data/variables and methods of the component like so:

wrapper.vm.data
wrapper.vm.method()

Even better would be to define an interface for your component to extend which would allow TypeScript to understand the methods available to the instance, rather than taking the easy way out of typing as any. There's an answer to another question here on Stack Overflow that dives into that approach.