javascript - Metoden er ikke tilgjengelig i enhetstesten

Jeg laget et nytt prosjekt i VueJS med TypeScript.

Min komponent med metoder å teste:

<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>

Test :

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')
  })
});

og nå vil jeg gjerne teste, men metodene setSlide, setSliding er ikke tilgjengelige i wrapperen :(

Svar #1

Prøv dette:

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);
  });
});

Fordelen her er at du ikke trenger å kaste wrapper.vm til any hver gang du bruker wrapper.vm

Svar #2

Det ser ut til at du må kaste wrapper.vm som any for at TypeScript ikke skal klage:

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

Eller på toppen av testene dine:

const wrapper: any = shallowMount(Slider);

Kilde: https://github.com/vuejs/vue-test-utils/issues/255#issuecomment-433312728.

Relaterte artikler