Тестирование vue-компонент, который использует фильтр - PullRequest
Новая
       5

Тестирование vue-компонент, который использует фильтр

0 голосов
/ 05 октября 2018

У меня есть следующий компонент: 

<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 не является функцией, хотя я добавил ее в тест? И как правильно это сделать?

Спасибозаранее

1 Ответ

0 голосов
/ 18 декабря 2018

У меня похожая проблема.

Пока что я решил, импортировав в свой тестовый код Vue и зарегистрировав фильтр глобально.Мне это не нравится, я бы предпочел не загрязнять глобальную область видимости, но объявление его на «localVue» не работает: 

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

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