Search code examples
react-testing-library

react-testing-library shows element in debug but fails test

I have a test that the 'debug' is showing the element exists, but fails the test. Its possible that the link is further down the page and css wise, is hidden from view, but how to set react-testing-library to know what are the 'dimensions' of the total viewport?

example react output

<h3>I am a title</h3>
<p>I contain a child link: <a href={'somepath'}>some link</a> and some text</p>

exmaple test

 it('should render form content', () => {
    const { queryByText, debug } = render(<MyComponenet />);
    expect(queryByText('I am title')).toBeInTheDocument(); // This passes
    debug(); // This shows the element exists with the text.
    expect(queryByText('I contain a child link')).toBeInTheDocument(); // This fails
});

How to fix this?

Solution

  • ok i discovered that getByText or queryByText is an 'exact' match, so it won't test partial text. I need to add:

    queryByText('I contain a child link', {exact: false})