向找到的组件添加Props会抛出已挂载的包装器

Question

我有一个包含选择器可重用组件的表单，像这样

<template>
<div class="channelDetail" data-test="channelDetail">
<div class="row">
<BaseTypography class="label">{{ t('channel.detail.service') }}</BaseTypography>
<BaseSelector
v-model="serviceId"
data-test="serviceInput"
class="content"
:option="servicePicker.data?.data"
:class="serviceIdErrorMessage && 'input-error'"
/>
</div>
<div class="row">
<BaseTypography class="label">{{ t('channel.detail.title') }}</BaseTypography>
<BaseInput v-model="title" data-test="titleInput" class="content" :class="titleErrorMessage && 'input-error'" />
</div>
</div>
</template>

我要test通过使用vue-test-utils和急速地。我需要设置选项道具从脚本到选择器。在我看来，这应该是工作，但不是

it('test', async () => {
const wrapper=mount(MyForm,{})
wrapper.findComponent(BaseSelector).setProps({option:[...some options]})
---or
wrapper.find('[data-test="serviceInput"]').setProps({option:[...some options]})
---or ???
});

谁能帮我把道具设置成组件在安装包装组件?

Answer 1

答案是你不应该那样做。因为BaseSelector应该有自己的测试，您应该通过setProps测试行为变化。

但是如果你因为某些原因不能这样做，你可以这样做:

1. 检查传递给BaseSelector的道具。它们总是依赖于一些活性数据(props,data，或computed)
2. 将MyForm中的数据更改为
例如

// MyForm.vue
data() {
return {
servicePicker: {data: null}
}
}
// test.js
wrapper = mount(MyForm)
wrapper.setData({servicePicker: {data: [...some data]})
expect(wrapper.findComponent(BaseSelector)).toDoSomething()

但是我建议你在单独的测试中通过改变它的道具或数据来覆盖BaseSelector的行为。然后在MyForm的测试中你应该检查传递给BaseSelector的道具

expect(wrapper.findComponent(BaseSelector).props('options')).toEqual(expected)