添加道具为找到的组件扔掉了安装的包装器

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 和 vitest 。 我需要将选项道具从脚本设置为选择器。 在我的想法中，这应该是可行的，但没有

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，数据或计算）
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)