getByText for text split onto separate lines by dynamically generated string

Question

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>

physicsboy · Accepted Answer · 2022-01-05 10:49:49Z

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

answered Jan 5, 2022 at 10:49

physicsboy

6,46622 gold badges79 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

getByText for text split onto separate lines by dynamically generated string

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related