I have an element that has a bination 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 have an element that has a bination 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>

• javascript
• reactjs
• unit-testing
• testing
• react-testing-library

Share Improve this question Follow edited Jan 5, 2022 at 10:50 physicsboy asked Jan 5, 2022 at 10:44 physicsboyphysicsboy 6,3782222 gold badges7777 silver badges139139 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

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 :)