Can't find child even though child was rendered

[dschinkel]

this one is really odd. Here is a screencast of it: https://youtu.be/WyfVGls69ws

but basically I find that the <title /> is indeed returned in the container's render yet the mount find isn't finding it per my css feature marker.

    it.only('renders a helmet tag for seo', () => {
      const liveScreen = mount(
        <Provider store={createStore(reducers, { live: { panels, seo: { title: "Test Title" } } })}>
          <Live
            breakpoint="site-web"
            setOverlay={() => ''}
            overlay=""
            geoLocationDeclined
            renderInfoInDetail={() => {}}
            getUseUtagGlobal={() => {}}
            pageViewEvent={() => {}}
            AccessEnablerUrl=""
          />
        </Provider>);

        const tag = liveScreen.find('.ft-seo-tag-title');

      expect(tag).to.have.length(1);
    });

the container is wrapped in a ReactTimeout HOC but I don't think that matters

const TimeoutLive = ReactTimeout(connect(mapStateToProps, {
  fetchLive,
  fetchLivePanel,
  fetchLiveVideo,
  clearLive,
  saveLiveRestart,
})(Live));

I end up with tag having length 0.

When I do a .debug() on the container, I don't see it so I guess it's not being render, which is weird, as you see in the vid it was. I will investigate unless anyone has thoughts on it...

I think what might be happening is the helmet lib is swallowing that render and rendering it in its own HOC form, because here is what I see from debug. Notice the title of Test Title is there:

<HelmetWrapper defer={true} encodeSpecialCharacters={true}>
                <SideEffect(NullComponent) defer={true} encodeSpecialCharacters={true} title="Test Title" titleAttributes={{...}}>
                  <NullComponent defer={true} encodeSpecialCharacters={true} title="Test Title" titleAttributes={{...}} />
                </SideEffect(NullComponent)>
              </HelmetWrapper>

Update #1

well this is weird, I put a marker on the helmet tag and it still can't find it:

const title = liveScreen.find('.ft-seo-tag')

<HelmetWrapper className="ft-seo-tag" defer={true} encodeSpecialCharacters={true}>
                <SideEffect(NullComponent) className="ft-seo-tag" defer={true} encodeSpecialCharacters={true} title="Test Title" titleAttributes={{...}}>
                  <NullComponent className="ft-seo-tag" defer={true} encodeSpecialCharacters={true} title="Test Title" titleAttributes={{...}} />
                </SideEffect(NullComponent)>
              </HelmetWrapper>

ends up in length of zero even though clearly the className is there when looking at the enzyme output!

Update #2

Ok I don't like doing finds on Component names because that couples my tests to implementation details but for the sake of debugging this, I did:

const title = liveScreen.find(Helmet)

What's interesting or weird is that it finds it when going the find by Component route.

But then that still begs the question of my original problem, if that's the case why didn't my find on the marker work if you can clearly see it as a prop below when I find it by Component Name?

So this is mounted, I'd figure that it should be able to find anywhere in the react tree, through any HOC levels in order to find my marker, without having to do anything other than mount()...is that correct?:

when I try this, it's not finding it and I don't know why:

Update #3

Just fiddling around with stuff. This is weird too. So if I try this route just for the hell of it, I'm able to get at the child of the HOC that has what I'm actually trying to test:

When we just look at props you see:

So I said fine, it's weird how helmut's structure is, not intuitive but thought ok, lets see if I can get the title by doing const title = tag.props().children[0].props().children since you see there that children is a property and contains the title I'm testing:

hmm why would that be an error?

If I take one step back, it's saying I can't call props() on that child when it does have props?

[dschinkel]

resolved but was kinda nasty. @ljharb any ideas to improve on this?

solution: expect(title.children[0][0].props.children).to.equal(data.live.seo.title);

screencast: https://youtu.be/tnPWcb-55b4

[ljharb]

title.childAt(0).prop('children') doesn't work?

You should never need bracket access on an enzyme wrapper.

[dschinkel]

well usually I bypass having to do any traversing like that by adding css feature markers but yea. I'll try that although doing children[0].prop('children') didn't work. I had to access it via multidimensional array due to the fact that for some reason I couldn't find by feature marker this time.

[3axap4eHko]

#1233 (comment)