Question

我正在尝试为Vue组件中的功能创建基本测试，但失败了。

main.ts

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
   const app = new Vue({
     el: '#app',
    data: {
          ai: ''
        }
    })
</script>

App.ts

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

MainContainer.vue

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

export default App

MainContainer.spec.ts

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

export default MainContainer

测试失败，并显示错误

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

如果尝试从App.ts中测试data.msg，则会看到相同的行为。我将不胜感激。谢谢

Answer 1

您必须指定wrapper.vm的类型

一种可行的解决方案是将类型指定为任意：

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

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

1 个答案: