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>

Answer 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

Answer 2

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