[英]How to unit testing with jest in vue composition api component?
I'm writing a unit test with jest, for my composition API component in vue.js.我正在用 jest 为 vue.js 中的组合 API 组件编写单元测试。
But I can't access to functions in composition API's setup().但是我无法访问组合 API 的 setup() 中的函数。
Indicator.vue指标.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 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
类型错误:无法读取未定义的属性“vm”
I think simply importing CompositionApi
should solve your issue.我认为只需导入
CompositionApi
可以解决您的问题。
import CompositionApi from '@vue/composition-api'
Vue.use(CompositionApi)
I would also suggest to use jest.config.js
file to initialize it by default:我还建议默认使用
jest.config.js
文件对其进行初始化:
setupFiles: ['<rootDir>/tests/helpers/foo.js']
then in your tests/
folder create helpers/
with file foo.js
然后在您的
tests/
文件夹中创建helpers/
文件foo.js
and in file:并在文件中:
import Vue from 'vue'
import CompositionApi from '@vue/composition-api'
Vue.use(CompositionApi)
In nuxt.js version 2 @andrej-gaspar
solution almost worked but it throws Cannot read property install of undefined
error, so to fix that error do like below:在 nuxt.js 版本 2
@andrej-gaspar
解决方案几乎可以工作,但它抛出Cannot read property install of undefined
错误的Cannot read property install of undefined
,因此要修复该错误,请执行以下操作:
jest.config.js
setupFiles: ['<rootDir>/tests/helpers/foo.js']
foo.js
import Vue from 'vue'
import * as CompositionApi from '@vue/composition-api'
Vue.use(CompositionApi)
Or if you're using @nuxtjs/composition-api
:或者,如果您使用的是
@nuxtjs/composition-api
:
import Vue from 'vue'
import * as CompositionApi from '@nuxtjs/composition-api'
Vue.use(CompositionApi)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.