Challenge: how can both assertions be passing?

This is a typical bug found in React Testing Library: misusing .not.toBeInTheDocument(). (Similar bugs happen when misusing .not in other contexts too.)

In this test challenge, we have both of these lines:

expect(
  screen.queryByText(activeText)
).not.toBeInTheDocument();
expect(
  screen.queryByText(bannedText)
).not.toBeInTheDocument();

But looking at the component, it is impossible for both of those cases to be true at the same time.

The bug that is found in this test file is a common bug in real code bases, where we are testing things incorrectly. Right now the test has little value, and we might think we can trust it when refactoring, but it is likely to never fail (even if there were real changes) in its current state.

i
Challenge Mode: This lesson is actually a challenge - you are given a half working test and have to figure out how to get it working correctly.

You can use our courses to learn how to solve this challenge - there are courses on everything from basic Jest/Vitest fundamentals, down to how to test frontend code (using React Testing Library).

Loading full lesson content & code...

Ready to try running tests for this lesson?