Challenge: Select one of many elements

Often when testing your components there will be programatically generated lists of data (for example <tr> rows in a <table>), and you will want to select a specific row/item within that list.

Sometimes it is easy - they will have unique text or some other attribute that makes it simple to query for it.

But sometimes you literally just want to get something like the second or third element in that list.

For this challenge there are a bunch of identical looking buttons. They each call a mock function with different values. Figure out the best way to trigger a click on the second button.

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?