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

问题描述

使用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();
    });
  });
});


www说
浏览 1140回答 1
1回答

牧羊人nacy

我没用过vue 单元测试,但我觉得应该知道能怎么解决类型声明问题。。简单看了下,你要测试的组件是Toast,wrapper.vm是Toast实例。所以我觉得应该可以这么解决:const&nbsp;wrapper&nbsp;=&nbsp;shallowMount(Toast);const&nbsp;vm:&nbsp;Toast&nbsp;=&nbsp;wrapper.vm&nbsp;as&nbsp;Toast;&nbsp;&nbsp;&nbsp;//这里手动断言wrapper.vm为Toast实例vm.getCtModal('notLoginError');//....我记得ts有两种对数据类型进行断言的方式,一种是前<type>,另一种就是as。所以,只要你的Toast上有对应方法,你也可以自己断言wrapper.vm为Toast实例:(wrapper.vm&nbsp;as&nbsp;Toast).getCtModal('notLoginError');或者(<Toast>(wrapper.vm)).getCtModal('notLoginError');我没测试,感觉应该能解决问题吧。。不过话说,按道理Vue Test Utils这些工具库应该有自己的声明文件吧。他们应该会将wrapper类上的vm属性声明成any之类的吧,为什么会出现类型检查错误呢。。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript