проверить Vue js props компонент с помощью Vue-test-utils - PullRequest
Новая
       52

проверить Vue js props компонент с помощью Vue-test-utils

0 голосов
/ 22 февраля 2019

Я новичок в тестировании приложений Vue, пытаюсь протестировать реквизит в одном компоненте Vue с помощью пакета Vue-test-utils.Мне интересно, правильно ли я создаю propsData или есть другой подход, который в этом случае лучше успешно протестировать этот компонент

Template.spec.js 

import { mount } from '@vue/test-utils';
import Template from '~/components/Template.vue';

describe('Template', () => {
  const wrapper = mount(Template, {
    propsData: {
      image: 'https://loremflickr.com/640/480/dog',
      location: 'London',
      jobPosition: 'Developer',
      hashtags: ['es6', 'vue']
    }
  });

  it('should render member props', () => {
    expect(wrapper.props().image).toMatch('https://loremflickr.com/640/480/dog');
    expect(wrapper.props().location).toMatch('London');
    expect(wrapper.props().jobPosition).toMatch('Developer');
    expect(wrapper.props().hashtags).toEqual(['es6', 'vue']);
  });
});

Template.vue 

<template>
  <div class="template">
    <img
      :src="image"
    >
    <span>{{ location }}</span>
    <span>{{ jobPosition }}</span>
  </div>
</template>
<script>
export default {
  name: 'template',
  props: {
    image: {
      type: String,
      required: true
    },
    location: {
      type: String,
      required: true
    },
    jobPosition: {
      type: String,
      required: true
    },
  }
};
</script>

Ответы [ 2 ]

0 голосов
/ 29 августа 2019

Ваш Template.spec.js в порядке, в котором вы создали свои поддельные реквизиты.Вы можете проверить, выводятся ли эти поддельные реквизиты в HTML.

Вот пример: 

it('title render properly thru passed prop', () => {
    const wrapper = shallowMount(app, {
      propsData: {
        data: {
          title: 'here are the title'
        }
      },
    })
    expect(wrapper.text()).toContain('here are the title')
})

Таким образом, вы проверяете, может ли ваш код отображать ваши реквизиты в HTML

0 голосов
/ 09 августа 2019

Вы можете проверить не значение реквизита, а поведение компонента в зависимости от установленного реквизита.Например, ваш компонент может установить некоторые классы или показать какой-либо элемент, если установлена ​​некоторая опора

например 

describe( 'BaseButton.vue icon rendering', () => {
    const icon = 'laptop';
    const wrapper = shallowMount( BaseButton, {
        propsData : {
            icon : icon,
        },
    } );
    const wrapperWithoutIcon = shallowMount( BaseButton );

    it( 'renders icon component', () => {
        expect( wrapper.contains( FontAwesomeIcon ) ).toBe( true );
    } );
    
    it( 'sets a right classname', () => {
        expect( wrapper.classes() ).toContain('--is-iconed');
    } );

    it( 'doesn\'t render an icon when icon prop is not passed', () => {
        expect( wrapperWithoutIcon.contains( FontAwesomeIcon ) ).toBe( false );
    } );

    it( 'sets right prop for icon component', () => {
        const iconComponent = wrapper.find( FontAwesomeIcon );

        expect( iconComponent.attributes('icon') ).toMatch( icon );
    } );
} );
...