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

但是，根据official documentation，propsData对象应该为组件提供道具。

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

Answer 1

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

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

1 个答案: