CODEWITHSUNDEEP
javascriptvue.jsvue-componentvue-test-utils
user9993
user9993

Reputation: 6170

Missing required prop error in Vue unit test

I have a component with two required props. The unit test is failing because I get the following errors:

  console.error node_modules\vue\dist\vue.runtime.common.js:589
    [Vue warn]: Missing required prop: "heading"

    (found in <Root>)

  console.error node_modules\vue\dist\vue.runtime.common.js:589
    [Vue warn]: Missing required prop: "subHeading"

    (found in <Root>)

  console.error node_modules\vue\dist\vue.runtime.common.js:589
    [Vue warn]: Missing required prop: "heading"

    (found in <Root>)

  console.error node_modules\vue\dist\vue.runtime.common.js:589
    [Vue warn]: Missing required prop: "subHeading"

Component source:

<template>
    <div class="level-item has-text-centered">
        <div>
            <p class="heading">{{ heading }}</p>
            <p class="title">{{ subHeading }}</p>
        </div>
    </div>
</template>

<script>
export default {
    name: 'StatisticsBannerItem',
    props: {
        heading: {
            required: true
        },
        subHeading: {
            required: true
        }
    }
};
</script>

Test source:

import { shallow, mount } from '@vue/test-utils';
import StatisticsBannerItem from '../../../src/components/statistics-banner-item.vue';


describe('Statistics Banner', () => {  
    it('renders item with props data correctly', () => {
        const wrapper = shallow(StatisticsBannerItem, {
            propsData: {
                heading: 'Test Heading',
                subHeading: 'Test Subheading'
            }
        });
        // assertions
    });
});

However, according to the official documentation, the propsData object should be providing the props to the component.

How do I correctly pass props to a component in a test?

Upvotes: 2

Views: 6067

Answers (1)

user9993
user9993

Reputation: 6170

The problem was the test output was not as clear as it perhaps should be. The errors were coming from another test (another it inside the same file) that was not being passed props - the test output was arranged in a way that made it appear as though the errors were coming from the test in the question.

Upvotes: 6

Related Questions