Cannot find vue component relative to a wrapper that was returned by a previous call to find/first

[heymrcarter]

I have a component that renders multiple instances of a second component wrapped in divs:

<template>
   <div class="..." id="container-1">
       <component :foo="bar"></component>
   </div>

   <div class="..." id="container-2">
       <component :foo="baz"></component>
   </div>
</template>

I would expect to be able to search based on an id, and then be able to find component relative to the container in my first call to first:

    import Component from 'src/components/Component'
    ...
    it('configures component 1 with correct props', () => {
        const component = wrapper.first('#container-1').first(Component)
        expect(component.foo).toEqual('bar')
    })

   it('configures component 2 with correct props', () => {
        const component = wrapper.first('#container-2').first(Component)
        expect(component.foo).toEqual('baz')
    })

The first test will pass, however, the second test always fails with the reason that foo = bar

It looks like searching for a component using the component object is always done against the root component that was mounted rather than the wrapper that was returned by the first call to first

[eddyerburgh]

Yes, this isn't ideal.

find requires a Vue Instance to find another Vue Instance. Because div is a vNode, not a Vue Instance, find needs to use the default Vue instance.

I'm not sure if there's a good solution for this, I'll have a think about it.

In the meantime you can use wrapper.find(Component)[1].

[heymrcarter]

That makes sense now that you've explained it. I was trying to avoid dereferencing the array as the number of child components is dynamic and therefore the index for the same child will be different from test to test, potentially causing confusion. But in the meantime this does get the job done. Thanks!

[beliolfa]

Any news on this?

I am trying to do something like this

const sectionWrapper = wrapper.first('#team-alignment-section');
const section = sectionWrapper.find(DashboardSection);