我有以下组件:
<template>
<div class="lead-segment">
<div v-html="insuranceType()"></div>
</div>
</template>
<script>
import Vue from 'vue';
export default {
name: 'lead-segment',
props: {
rowData: {
type: Object,
required: true,
},
rowIndex: {
type: [Number, String],
},
},
methods: {
insuranceType() {
const contribution = Vue.filter('currencyFilter')(this.rowData.additionalCustomerInfo.contribution);
return `${this.rowData.leads.insurance_type.name}<br/>${contribution}`;
},
},
};
</script>
以及下面的测试,用 karma/jasmine 和 vue-test-utils 编写。
import { createLocalVue, shallowMount } from '@vue/test-utils';
import LeadSegmentComponent from './LeadSegmentComponent';
import { currencyFilter } from '../filters';
describe('LeadSegmentComponent', () => {
const localVue = createLocalVue();
localVue.filter('currencyFilter', currencyFilter);
const wrapper = shallowMount(LeadSegmentComponent, {
localVue,
propsData: {
rowData: {
additionalCustomerInfo: {
contribution: 1,
},
leads: {
insurance_type: {
name: '',
},
},
},
},
});
const vm = wrapper.vm;
it('should be build', () => {
expect(vm)
.toBeDefined();
});
});
如果我执行测试,我会收到以下错误:
"message": "afterAll 中抛出一个错误\nTypeError: __WEBPACK_IMPORTED_MODULE_0_vue___default.a.filter(...) is not a function\n
如果我删除组件中使用的过滤器,则测试通过。
为什么 Vue.filter 不是一个函数,尽管我将它添加到测试中?什么是正确的方法?
提前致谢