I have an element that has a combination of static and dynamic text all on the same line.
When testing for this line of text by a substring including some of the static and dynamic text, it fails, showing the output being split onto multiple lines with the splits before and after the dynamic section.
What is going on? Why can't I test it in the way I am expecting? How would I test this properly?
Code.jsx
const dynamicText = 'all be on one line';
return <div>This should {dynamicText} like I expect.</div>
Code.spec.js
it('Should have dynamic text on one line', () => {
const {getByText} = render(<Code />);
expect(getByText('should all be on one line ')).toBeTruthy();
});
Test output
Unable to find an element with the text: ... This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
...
<div>
This should
all be on one line
like I expect
</div>
I figured out a way in which this can be done easily.
In my code I was trying to match a substring of the full string as I was merely interested in checking that the dynamic part rendered properly. Specifying the string I am looking for within quotes (single or double) seems to make RTL look at this like a definitive string.
Instead, I changed the single quotes to make it more of a regex style, so changing 'should all be on one line' to /should all be on one line/.
The test now passes :)