text() returns element instead of text

[dylankil]

I've struggled with testing child element text all afternoon.

it('tests child element for its text', () => {
     const component = shallow(<Component {...props} />).dive();
     expect(component.find('span').text()).toContain('some text');
});

However, the above fails. What's the new way of accomplishing this?

[ljharb]

That is the only way.

Perhaps you could fill out the issue template? It’s there for a reason.

(possible duplicate of #1800)

[dylankil]

@ljharb This is a well known issue and the engineers on my team (including me) have implemented rather extravagant workarounds, helper functions, ways to work around default classes and the like. Requesting I fill out a template is egregious. It should be a matter of principle that finding the inner text or inner html of a rendered element is trivial work with regards to unit tests. The same goes for testing functions.

[dylankil]

@ljharb I got the UT to work, but this syntax is too specific. Developers shouldn't need to traverse the component to find an element. Looks like bad code to me:

expect(component.find(SubComponentA).first().find('span').text()).toContain('some text');
expect(component.find(SubComponentA).find(SubComponentB).find(SubComponentAOfSubComponentB).first().find('span').text()).toContain('some text');

I would keep this issue open until .find() works from the root component.

[ljharb]

@dylankil we have tons of tests that prove it works, so without knowing the things the template asks for - the versions you're using, and repro code - there's no way i can help you.

It may be a well known issue on your team, but to the enzyme maintainers (me) it isn't an issue that I know exists, absent a repro case. I would love to be able to fix this for you.

[ljharb]

Additionally, I'd say that what is egregious is asking for free help with software you didn't pay for, and refusing to fill out the issue template that the maintainers require to be capable of helping you.