如何在 vue 组合 api 组件中使用 jest 进行单元测试? [英] How to unit testing with jest in vue composition api component?
问题描述
我正在用 jest 为 vue.js 中的组合 API 组件编写单元测试.
但我无法访问组合 API 的 setup() 中的函数.
Indicator.vue
<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 step" :key="step"><a href="#" @click="updateValue(step)" :class="activeClass(step, current)"></a><div class="indicator-caption d-flex justify-content-center">步<跨度>{{当前}}</span>从<跨度>{{ 步骤 }}<script lang="ts">从 '@vue/composition-api' 导入 {createComponent}；导出默认 createComponent({name: '指标',道具: {脚步: {类型:数字，要求:真实},当前的: {类型:数字，要求:真实}},设置(道具，上下文){const updateValue = (step: number) =>{context.emit('clicked', step);};const activeClass = (step: number, current: number) =>步<当前的 ?通过":步骤 === 当前?'当前的' : '';返回 {更新值，活动类};}});<style></style>
Indicator.test.ts
从'@/views/components/Indicator.vue'导入指标；从'@vue/test-utils'导入{shallowMount}；describe('@/views/components/Indicator.vue', () => {让包装:任何；beforeEach(() => {包装器 = 浅安装(指标，{道具数据:{步骤:4，当前:2}});});it('应该返回值 (2,2)', () => {期望(wrapper.vm.activeClass(2, 2)).toBe('current');});});我在运行测试命令时遇到了这个错误:
<块引用>TypeError: 无法读取未定义的属性 'vm'
我认为只需导入 CompositionApi 就可以解决您的问题.
从 '@vue/composition-api' 导入 CompositionApiVue.use(CompositionApi)I'm writing a unit test with jest, for my composition API component in vue.js.
But I can't access to functions in composition API's 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');
});
});
And I got this Error, in running test command:
TypeError: Cannot read property 'vm' of undefined
I think simply importing CompositionApi should solve your issue.
import CompositionApi from '@vue/composition-api'
Vue.use(CompositionApi)
这篇关于如何在 vue 组合 api 组件中使用 jest 进行单元测试?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
