Tôi đang viết một bài kiểm tra đơn vị với jest, cho thành phần API thành phần của tôi trong vue.js.
Nhưng tôi không thể truy cập các chức năng trong thiết lập API của thành phần ().
Chỉ số.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');
});
});
Và tôi đã gặp lỗi này, khi chạy lệnh kiểm tra:
LoạiError: Không thể đọc thuộc tính 'vm' không xác định