Check if object contains a link in React Testing Library

Question

Having the following unit test:

  const MY_URL = 'example.com'
  it('should render MyComponent with url', () => {
    const { getByTestId } = render(<MyComponent />);
    const myLink = getByTestId(TestIds.LINK);
    expect(loggingLink).toContain(MY_URL);
  });

The test fails with the following message:

 Expected value:  "example.com"
 Received object: <div class="m-3" data-testid="test-link"><a href="example.com">my-link</a></div>

So it seems that toContain doesn't check what is inside of that object. Is there a method to check that the URL is inside the object?

Answer 1

You can get the anchor element with ByRole query. Just search it with link and then check the attribute href :

// I used screen in this case, but you can get getByRole from render.
const anchorElement = screen.getByRole('link');

expect(anchorElement).toBeInTheDocument();

expect(anchorElement).toHaveAttribute('href', 'example.com');

Anchor elements have link role only when href attribute is present, otherwise no corresponding role. You can check more about it here .

Answer 2

There's a couple of things. First, toContain is for testing if an element exists in an array. https://jestjs.io/docs/expect#tocontainitem

Second, the point of RTL is not to test properties and such, but to test what users see on the screen. So I guess the "RTL way" of doing this would be to click the link and see what's displayed. Which admittedly is not always helpful in every situation!

If you are absolutely sure this url needs a test around it, then you do have an escape hatch via the underlying jest jsdom selectors . You can query an element using a bog standard querySelector and then test the href property directly.

In fact you don't even need querySelector. The getBy methods all return a jsdom object which you can then test with getAttribute('href')