I created new project in VueJS with TypeScript.

My ponent with methods to test:

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

and now I would like do test but methods setSlide, setSliding isn't available in wrapper :(

I created new project in VueJS with TypeScript.

My ponent with methods to test:

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

and now I would like do test but methods setSlide, setSliding isn't available in wrapper :(

• javascript
• typescript
• unit-testing
• vue.js
• jestjs

2 Answers 2

Try this:

import YourComponentHere from "@/ponents/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);
  });
});

The advantage here is that you don't need to cast wrapper.vm to any everytime you use wrapper.vm

It seems you have to cast wrapper.vm as any for TypeScript not to plain:

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

Or at the top of your tests:

const wrapper: any = shallowMount(Slider);

Source: https://github./vuejs/vue-test-utils/issues/255#issuement-433312728.