VueJS 메서드를 타이프스크립트 농담으로 어떻게 부를 수 있을까요?

VueJS 메서드를 타이프스크립트 농담으로 어떻게 부를 수 있을까요?

VueCLI에서 TypeScript와 Jest를 사용하여 테스트 코드를 작성하고 있습니다.

Vue 파일의 메서드를 호출하여 메서드를 테스트했습니다.

그러나 다음과 같은 오류가 발생했습니다.

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();
    });
});

장치 테스트 명령 실행 후 오류가 발생했습니다.

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();

테스트에서 Vue JS의 메서드를 호출할 수 없는 이유는 무엇입니까?

이렇게 해보다

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

이 문제는 사용자 이름과 관련된 유형과 관련이 있습니다.const wrapper같은 문제를 안고, 다음과 같이 해결했습니다.

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

이를 통해 다음과 같이 정의된 데이터/변수 및 컴포넌트의 메서드를 참조할 수 있습니다.

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

컴포넌트가 확장되는 인터페이스를 정의하여 TypeScript가 인스턴스에서 사용할 수 있는 메서드를 이해할 수 있도록 하는 것이 좋습니다.any. Stack Overflow에 대한 또 다른 질문에 대한 답변이 있습니다.

해라

expect(wrapper.vm.testMethod).toBeTruthy()

를 사용하여 래퍼 내의 인스턴스에 액세스합니다.https://vue-test-utils.vuejs.org/api/wrapper/ 를 참조해 주세요.

VM

컴포넌트(읽기 전용):이것은 Vue 인스턴스입니다.wrapper.vm을 사용하여 VM의 모든 인스턴스 메서드 및 속성에 액세스할 수 있습니다.이 기능은 Vue 구성 요소 래퍼 또는 HTMlement 바인딩 Vue 구성 요소 래퍼에만 있습니다.

언급URL : https://stackoverflow.com/questions/55496506/how-can-i-call-vuejs-method-in-jest-of-typescript