Use the AllBy variant to get Multiple Instances of an Element
Sometimes you may need to get more than just one result from your queries.
In this lesson, you are going to learn how you can leverage the AllBy variant to extend your queries to find an array of elements instead of a single one.
Instructor: [0:00] All the queries we saw in the last three lessons only returned the first matching node. This means that if we have multiple instances of a single node, these queries will fail. In order to understand this, in our UI, let's copy and paste our Edge1 multiple times.
[0:15] In this case, we know that there are five instances of, "This is an Edge1 in our component." Back to our test, let's leverage the code of the getByTest and paste it here.
[0:25] As you can see, if we run our test, the test has failed with an error message of, "Found multiple elements with the text. This is an Edge1." In scenarios we want to look for multiple instances of the same element, we can add the word "all" in our queries.
[0:39] This means that we would end up with queryAllBy, getAllBy, and findAllBy. Let us now refactor our test to apply this. First, we destructure the getAllByText query from Render.
[0:50] Then, we use it to get all the this is an Edge1 text instances in our UI. Since the toBeInTheDocument assertion expects a single element, let's change our assertion as well to instead expect that our headers list array has a length of five. Finally, if we rerun our test, you should see that it has passed.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!