Vue 구성 API 구성 요소에서 jest로 단위 테스트를 수행하는 방법은 무엇입니까?


9

vue.js의 컴포지션 API 구성 요소에 대해 jest로 단위 테스트를 작성하고 있습니다.

그러나 composition API의 setup ()에서 함수에 액세스 할 수 없습니다.

Indicator.vue

<template>
  <div class="d-flex flex-column justify-content-center align-content-center">
    <ul class="indicator-menu d-flex justify-content-center">
      <li v-for="step in steps" :key="step">
        <a href="#" @click="updateValue(step)" :class="activeClass(step, current)"> </a>
      </li>
    </ul>
    <div class="indicator-caption d-flex justify-content-center">
      step
      <span> {{ current }}</span>
      from
      <span> {{ steps }}</span>
    </div>
  </div>
</template>

<script lang="ts">
import {createComponent} from '@vue/composition-api';

export default createComponent({
  name: 'Indicator',
  props: {
    steps: {
      type: Number,
      required: true
    },
    current: {
      type: Number,
      required: true
    }
  },
  setup(props, context) {
    const updateValue = (step: number) => {
      context.emit('clicked', step);
    };
    const activeClass = (step: number, current: number) =>
      step < current ? 'passed' : step === current ? 'current' : '';
    return {
      updateValue,
      activeClass
    };
  }
});
</script>

<style></style>

Indicator.test.ts

import Indicator from '@/views/components/Indicator.vue';
import { shallowMount } from '@vue/test-utils';

describe('@/views/components/Indicator.vue', () => {  
  let wrapper: any;
  beforeEach(() => {
    wrapper = shallowMount(Indicator, {
      propsData: {
        steps: 4,
        current: 2
      }
    });
  });
  it('should return "current" for values (2,2)', () => {
    expect(wrapper.vm.activeClass(2, 2)).toBe('current');
  });
});

그리고 테스트 명령을 실행할 때이 오류가 발생했습니다.

TypeError : 정의되지 않은 'vm'속성을 읽을 수 없습니다

답변:


0

수입 CompositionApi은 단순히 문제를 해결해야 한다고 생각 합니다.

import CompositionApi from '@vue/composition-api'

Vue.use(CompositionApi)
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.