javascript - Check if object contains a link in React Testing Library - Stack Overflow

admin管理员组

文章数量:1389779

Having the following unit test:

  const MY_URL = 'example'
  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"
 Received object: <div class="m-3" data-testid="test-link"><a href="example">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?

Having the following unit test:

  const MY_URL = 'example.'
  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."
 Received object: <div class="m-3" data-testid="test-link"><a href="example.">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?

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

Share Improve this question Follow asked May 31, 2022 at 20:08 Leo MessiLeo Messi 6,2462222 gold badges8080 silver badges155155 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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.');

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

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

本文标签： javascriptCheck if object contains a link in React Testing LibraryStack Overflow