我有一个包含两个必需道具的组件 . 单元测试失败，因为我收到以下错误：
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 对象应该为组件提供道具 .
如何正确地将道具传递给测试中的组件？
1 回答
问题是测试输出并不像它应该的那样清晰 . 错误来自另一个未被传递道具的测试（同一文件中的另一个
it） - 测试输出的排列方式使得看起来错误来自问题中的测试 .