为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

www说 2018-11-13 13:29:48
问题描述使用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之类的吧,为什么会出现类型检查错误呢。。


查看完整回答
反对 回复 2018-11-13
  • 1 回答
  • 0 关注
  • 1137 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号