test Vue js props component with Vue-test-utils

Question

I'm new on testing Vue apps, I'm trying to test props in one Vue component, using Vue-test-utils package. I'm wondering if I'm creating the propsData is the proper way or there is another approach which in that case it's better to test this component successfully

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>

It seems to me that all you are testing is that mount() provides the props to your component. I'm not clear as to what the actual problem is. If you want to test that the props get rendered to the browser (it('should render member props'), that feels more like an e2e test. — Richard Matsen
– Richard Matsen, Commented Feb 22, 2019 at 22:07

Toomean · Accepted Answer · 2019-08-09 08:54:09Z

You can test not props value, but component's behavior depending on props set. For example, your component can set some classes or show some element if some prop is set

e.g.

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 );
    } );
} );

Marcello B. · Accepted Answer · 2019-08-29 05:22:38Z

1

Your Template.spec.js is fine, in which you set up your fake props. You can check if those fake props are rendered out into the HTML.

Here is an example:

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')
})

This way, you are checking if your code can render your props to HTML

edited Aug 29, 2019 at 5:22

Marcello B.

4,47011 gold badges48 silver badges72 bronze badges

answered Aug 29, 2019 at 3:30

Ben

571 silver badge7 bronze badges

Collectives™ on Stack Overflow

test Vue js props component with Vue-test-utils

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related