Adding Props to found components throw the mounted wrapper

Question

I have a form that contains a selector reusable component like this

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

I'm going to test this form by using vue-test-utils and vitest. I need to set option props from the script to the selector. In my thought, this should be worked but not

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

Could anyone help me to set the props into components in the mounted wrapper component?

Answer 1

The answer is that you should not do that. Because BaseSelector should have it's own tests in which you should test behavior changes through the setProps.

But if you can't do this for some reason, here what you can do:

1. Check the props passed to BaseSelector. They always depend on some reactive data (props, data, or computed)
2. Change those data in MyForm instead.

For example

// MyForm.vue
data() {
  return {
    servicePicker: {data: null}
  }
}

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

But I suggest you to cover the behavior of BaseSelector in separate test by changing it's props or data. And then in the MyForm's test you should just check the passed props to BaseSelector

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