[feature request] Extend toContainReact to be able to check for a prop or text within the component

[nayomitchell]

Let's say I have a Navigation Bar element:

function NavBar() { return ( <div> <ButtonWrapper /> </div> ) };

ButtonWrapper is a component that renders a normal html button element with some string of text.

I'm in a situation that I want to make sure that my NavBar contains a specific string. But due to this issue with enzyme itself, I can't really call text() or use toHaveText(), as it doesn't return the actual text within the component.

The workaround that I found was doing:

const wrapper = shallow(<NavBar/>);
const buttonWrapper = wrapper.findWhere(elem => elem.type() === ButtonWrapper && elem.render().text() === expectedText);

There doesn't seem to be a way to avoid having to manually render the component in order to check its child's text or properties. It would be nice to have a matcher that will do this step. Somewhat of a cross between toContainReact and toHaveText/toHaveProp.

[blainekasten]

@nayomitchell how often do you run into this in your tests?

I see what you are saying and it is definitely an ugly implementation. But I'm cautious to create a method for something that is rare. And maybe even something that shouldn't be encouraged. I see all of the matchers in this library as encouragement to test your applications in specific ways and wouldn't want to encourage in ways that shouldn't be tested.

What are your thoughts on that?

[blainekasten]

I'm going to close this unless there is more requests for this feature.