Question

我有以下内容：

<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（...）不是函数\ n

如果我删除了组件中使用的过滤器，则测试通过。

为什么Vue.filter不是函数，尽管我将其添加到测试中？正确的方法是什么？

预先感谢

Answer 1

我遇到类似的问题。

到目前为止，我通过导入测试代码Vue并在全局注册过滤器来解决。我不喜欢它，我希望不污染全局范围，但是在“ localVue”上声明它似乎不起作用：

import Vue from 'vue';
import myFilter from './myFilter';

describe('MyComponent', () => {
    Vue.filter('myFilter', myFilter);
    // test code...
});

测试使用过滤器的vue-componet

1 个答案: