What is the difference between toBeInTheDocument() and toBeVisible()?

Question

In react testing library, we have two functions called toBeInTheDocument() and toBeVisible().

1 expect(screen.getByText('hello')).toBeInTheDocument();
2 expect(screen.getByText('hello')).toBeVisible();

It seems both assertions behave the same. What is their difference, and what are the use cases for each?

Answer 1

According to the testing-library/jest-dom documentation,

toBeInTheDocument simply finds element is in DOM Tree regardless of visibility

toBeVisible checks for multiple attributes to see if it's visible such as

1. display not equal to none
2. opacity greater than 0
3. hidden attribute does not exist
4. visibility not equal to hidden or collapse
5. checks for element, if it's document and parent is visible