使用 Jest 测试 Vuejs 和 TypeScript 会导致错误“属性 'xxx' 在类型 'CombinedVueInstance' 上不存在
Testing Vuejs and TypeScript with Jest causes an error "Property 'xxx' does not exist on type 'CombinedVueInstance'
我正在尝试为 Vue 组件中的函数创建一个基本测试,但失败得很惨。
main.ts
new Vue({
render: (h) => h(App),
router,
store,
}).$mount('#app')
App.ts
const App = Vue.extend({
components: { MainContainer },
data() {
return {
msg: 'Test',
}
},
name: 'App',
template: `<MainContainer />`,
})
export default App
MainContainer.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,我会看到相同的行为。我将不胜感激任何帮助。谢谢
您必须指定 wrapper.vm
的类型
一个可行的解决方案是将类型指定为任何 :
expect((wrapper.vm as any).sum(1, 2)).toEqual(3)
我正在尝试为 Vue 组件中的函数创建一个基本测试,但失败得很惨。
main.ts
new Vue({
render: (h) => h(App),
router,
store,
}).$mount('#app')
App.ts
const App = Vue.extend({
components: { MainContainer },
data() {
return {
msg: 'Test',
}
},
name: 'App',
template: `<MainContainer />`,
})
export default App
MainContainer.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,我会看到相同的行为。我将不胜感激任何帮助。谢谢
您必须指定 wrapper.vm
的类型一个可行的解决方案是将类型指定为任何 :
expect((wrapper.vm as any).sum(1, 2)).toEqual(3)