@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&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之类的吧，为什么会出现类型检查错误呢。。