问题描述使用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收藏 评论
1 回答

牧羊人nacy
TA贡献1862条经验 获得超7个赞
我没用过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之类的吧,为什么会出现类型检查错误呢。。
添加回答
举报
0/150
提交
取消