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

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

    (found in <Root>)

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

    (found in <Root>)

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

    (found in <Root>)

  console.error node_modules\vue\dist\vue.runtimemon.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/ponents/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 ponent.

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

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

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

    (found in <Root>)

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

    (found in <Root>)

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

    (found in <Root>)

  console.error node_modules\vue\dist\vue.runtime.mon.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/ponents/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 ponent.

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

• javascript
• vue.js
• vue-ponent
• vue-test-utils

• The code you shared is correct, so maybe the problem es from another test or another ponent which uses this ponent. – Emile Bergeron Commented Apr 14, 2018 at 19:00
• I have isolated this single test, nothing else is using it. – user9993 Commented Apr 14, 2018 at 19:03
• Is it a typo in the real code you're using? like propsData: { propsData: {}} or something like that? – Emile Bergeron Commented Apr 14, 2018 at 19:22
• 1 Your code is fine. Just tested it. You have some other problem, somewhere else. – acdcjunior Commented Apr 14, 2018 at 19:40
• That is unfortunate, guess I'm stuck then. – user9993 Commented Apr 14, 2018 at 20:00

1 Answer 1

The problem was the test output was not as clear as it perhaps should be. The errors were ing 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 ing from the test in the question.