如何在打字稿的玩笑中调用 VueJS 方法？

Question

我正在使用 TypeScript 和 Jest 在 VueCLI 中编写测试代码。

我调用了 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>

示例.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中的方法？

Answer 1

尝试

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

访问包装器内的实例。请参阅https://vue-test-utils.vuejs.org/api/wrapper/

虚拟机

组件（只读）：这是 Vue 实例。您可以使用wrapper.vm访问vm的所有实例方法和属性。这只存在于 Vue 组件包装器或 HTMLElement 绑定 Vue 组件包装器上。