@vue/test-utils 使用ts语言书写单元测试中遇到的类型声明问题？

Question

问题描述使用Vue Test Utils，生成了wrapper，调用wrapper.vm.getCtModal()，因为使用ts语言，所以编译器会报出找不到xxxmethod的类型声明，问应该要怎么让xxxmethod有类型声明，或者使用其他方式调用vue实例的方法？问题出现的环境背景及自己尝试过哪些方法使用vue cli 3 创建的项目，使用官方推荐的@vue/test-utils工具书写单元测试，单元测试使用typescript语言，mocha测试框架以及chai断言库相关代码// 请把代码文本粘贴到下方（请勿用图片代替代码）import { expect } from 'chai';import { shallowMount } from '@vue/test-utils';import Toast from '@/components/toast/Toast.vue'; describe('Toast.vue', () => {   it('测试tips的值', (done) => {     const tips = '请再靠近一点';     const wrapper = shallowMount(Toast);     wrapper.vm.getCtModal('notLoginError');     wrapper.vm.$nextTick(() => {       const div = wrapper.find('.loading-title');       expect(div.text()).to.equal('尚未登录，请先登录');       done();     });   }); });关注 | 1收藏 评论

Answer 1

我没用过vue 单元测试，但我觉得应该知道能怎么解决类型声明问题。。

简单看了下，你要测试的组件是Toast，wrapper.vm是Toast实例。

所以我觉得应该可以这么解决：

const wrapper = shallowMount(Toast);const vm: Toast = wrapper.vm as Toast;   //这里手动断言wrapper.vm为Toast实例vm.getCtModal('notLoginError');//....

我记得ts有两种对数据类型进行断言的方式，一种是前<type>,另一种就是as。
所以，只要你的Toast上有对应方法，你也可以自己断言wrapper.vm为Toast实例:

(wrapper.vm as Toast).getCtModal('notLoginError');

或者

(<Toast>(wrapper.vm)).getCtModal('notLoginError');

我没测试，感觉应该能解决问题吧。。

不过话说，按道理Vue Test Utils这些工具库应该有自己的声明文件吧。他们应该会将wrapper类上的vm属性声明成any之类的吧，为什么会出现类型检查错误呢。。