ভয়ে কম্পোজিশন এপিআই উপাদানগুলিতে ঠাট্টা দিয়ে কীভাবে ইউনিট টেস্টিং করবেন?

Question

আমি vue.js তে আমার কম্পোজিশনের এপিআই উপাদানটির জন্য রসিকতার সাথে একটি ইউনিট পরীক্ষা লিখছি

তবে আমি কম্পোজিশন এপিআইয়ের সেটআপে ফাংশনগুলিতে অ্যাক্সেস করতে পারি না)

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

এবং টেস্ট কমান্ড চালানোর সময় আমি এই ত্রুটিটি পেয়েছি:

প্রকারের ত্রুটি: অপরিজ্ঞাতকৃত সম্পত্তি 'ভিএম' পড়তে পারে না

Answer 1

আমি মনে করি কেবল আমদানি CompositionApiকরা আপনার সমস্যার সমাধান করা উচিত।

import CompositionApi from '@vue/composition-api'

Vue.use(CompositionApi)