使用 Jest 测试 Vuejs 和 TypeScript 会导致错误“类型 'CombinedVueInstance' 上不存在属性 'xxx'

Question

我正在尝试为 Vue 组件中的函数创建一个基本测试，但失败了。

主文件

new Vue({
  render: (h) => h(App),
  router,
  store,
}).$mount('#app')

应用程序

const App = Vue.extend({
    components: { MainContainer },
    data() {
        return {
            msg: 'Test',
        }
    },
    name: 'App',
    template: `<MainContainer />`,
})

export default App

主容器.vue

const MainContainer = Vue.extend({
    components: {
        Content,
    },
    methods: {
        sum: (a: number, b: number): number => a + b,
    },
})

export default MainContainer

MainContainer.spec.ts

import { createLocalVue, shallowMount } from '@vue/test-utils'

describe('MainComponent.vue', () => {
    const localVue = createLocalVue()

    test('sum method should add number together', () => {
    const wrapper = shallowMount(MainContainer, { localVue })
    expect(wrapper.vm.sum(1, 2)).toEqual(3)
})

测试失败并出现错误

Property 'sum' does not exist on type 'CombinedVueInstance<Vue, object, object, object, Record<never, any>>'.

如果我尝试从 App.ts 测试 data.msg，我会看到相同的行为。我很感激任何帮助。谢谢

Answer 1

您必须指定 wrapper.vm 的类型

一个有效的解决方案是将 type 指定为 any ：

expect((wrapper.vm as any).sum(1, 2)).toEqual(3)