What's the best way to test props you pass to child components?

Question

I'm testing a component using Vue test utils and Jest and I'm wondering what's the best way to test you are passing the correct values to a child components in it's props.

For example, test the values that the "items" attribute is given.

<template>
    <component-1 :items="myItems"/>
</template>

I know you can view the props with Vue test utils' props(), but is this the ideal way?

Answer 1

const wrapper = shallowMount(ParentComponent, {
  localVue,
  propsData: {
    ...
  }
})

const component1Props = wrapper.findComponent(Component1).props()

expect(component1Props.items).toEqual(
  expect.arrayContaining([
    {
      itemProperty: 'itemValue'
    }
  ])
)

Yes, that was the ideal way that worked for me. Because I'm just testing the contents of the props passed to the child component, I did a shallowMount of the parent component, which stubs child components but still receives the props. I called findComponent for the child component and then called .props() to inspect the props that have been passed in.