在Vue单元测试中缺少所需的螺旋误差

Question

我有一个包含两个必需道具的组件.单元测试失败,因为我收到以下错误:

  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"

组件来源:

<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>

测试来源:

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

但是,根据官方文档,该propsData对象应该为组件提供道具.

如何正确地将道具传递给测试中的组件？

Answer 1

问题是测试输出并不像它应该的那样清晰.错误来自另一个it未被传递道具的测试(同一文件中的另一个测试) - 测试输出的排列方式使得看起来错误来自问题中的测试.