Challenge: Screen Reader Only Text

One of the benefits of using React Testing Library is that it encourages you to query for elements like a real user would. And that includes querying them like a screen reader user would - via things like aria-label attributes.

In this challenge we have a simple component with a button. It has no 'regular' text inside of it... so getByText() is failing. However there is a aria-label="Close dialog". Figure out how to get that element so you can click it!

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?