方法在单元测试中不可用

Posted 2023-02-22

【中文标题】方法在单元测试中不可用

【英文标题】：Method isn't available in unit test

【发布时间】：2019-11-23 01:32:17

【问题描述】：

我使用 TypeScript 在 VueJS 中创建了新项目。

我的组件带有测试方法：

<template>
    <div></div>
</template>

<script lang="ts">
import  Component, Vue  from 'vue-property-decorator';

@Component
export default class Slider extends Vue 
  private slide: number = 0;
  private sliding: boolean = false;

  public setSlide(slide: number): void 
    this.slide = slide;
  

  public setSliding(sliding: boolean): void 
    this.sliding = sliding;
  

  private onSliderStart(slide: any): void 
    this.setSliding(true);
  

  private onSlideEnd(slide: any): void 
    this.setSliding(false);
  

</script>

测试：

import  shallowMount  from '@vue/test-utils';
import Slider from '@/components/Header.vue';

describe('Slider', () => 
  const wrapper = shallowMount(Slider);

  it('check Slider is a Vue Instance', () => 
    expect(wrapper.isVueInstance()).toBeTruthy();
  );

  it('setSlide is func', () => 
    expect(typeof wrapper.vm.setSlide).toBe('function')
  )
);

现在我想做测试，但是方法 setSlide、setSliding 在包装器中不可用:(

【参考方案1】：

试试这个：

import YourComponentHere from "@/components/YourComponentHere";
import  shallowMount, Wrapper  from "@vue/test-utils";

describe("test", () => 
  const wrapper: Wrapper<YourComponentHere &  [key: string]: any >;
  it("does something", () => 
    expect(wrapper.vm.someThingWhatever).toBe(true);
  );
);

这里的好处是你不需要在每次使用wrapper.vm时都将wrapper.vm转换为any

【讨论】：

你也可以试试 Wrapper 因为我最近遇到了一些奇怪的错误

我很困惑。为什么Wrapper<YourComponentHere> 没有提供所需的所有类型？

在你项目的某个地方，你有一行'declare module *.vue'，它设置所有 vue 导入，以便它们具有 Vue 类型（没有类型信息的通用，没有道具名称及其接口等。 ）。目前没有主流的方式来做你所要求的。你问为什么：据说很难从 .vue SFC 文件中检索 prop 等信息 - 这就是我所知道的全部

有趣。但是如果我说class MyComponent extends Vue，然后在那里声明成员，你是说这些类型不会影响类的类型？

确实如此。您可以在脚本块的顶部写type a = My Component['yourPropName]'，然后输入就可以正常工作了。只是当您在定义组件的文件之外时，信息会丢失，因为“声明模块 *.vue 行”基本上意味着“假设所有 .vue 默认导入都是 Vue 类型（通用无类型接口）”

【参考方案2】：

看来您必须将 wrapper.vm 转换为 any 才能让 TypeScript 不抱怨：

it('setSlide is func', () => 
  expect(typeof (wrapper.vm as any).setSlide).toBe('function')
)

或在测试的顶部：

const wrapper: any = shallowMount(Slider);

来源：https://github.com/vuejs/vue-test-utils/issues/255#issuecomment-433312728。

【讨论】：

它不起作用，因为我收到未定义。我在 wrapper.vm 中没有任何方法或变量 :(

我复制粘贴了您的代码，它对我来说工作正常。你确定你从正确的地方导入Slider，Header.vue？

你是最棒的！我应该将文件从 Header.vue 更改为 Slider.vue

通过转换为任何你扔掉类型安全的东西。那为什么要使用打字稿呢？这是 hack，而不是解决方案。

这是一个解决方案，即使您认为它是一个 hacky 解决方案。仅仅因为 TS 在一个地方需要一个any 并不能消除它在项目其余部分中的重要性。