1. 25
    Testing Accessible Form Elements with React Testing Library's findByLabelText Query
    1m 19s

Testing Accessible Form Elements with React Testing Library's findByLabelText Query

Jamund Ferguson
InstructorJamund Ferguson
Share this video with your friends

Social Share Links

Send Tweet
Published 3 years ago
Updated 3 years ago

Testing Library's findBylabelText allow us to query a form element by either an associated <label> element or a aria-label property. Here we add an accessible label to our "add to cart" button to allow us to query the button without having to traverse the DOM.


The name property used to filter our findByRole results above refers to the accessible name determined by the browser and could reference button text, heading text or a label associated with a form element.

Instructor: [0:00] Go ahead and start just up in watch mode with a filter for products.test. Then open up products.tsx. Down here where we have our add to cart button, I'd like you to add a new prop, Aria-label. This is going to require template literals.

[0:13] We'll need curly braces here and then back ticks. Here we can say add ${product.name} to cart. Back in your products test, scroll down to this bottom test. We can say, const button = await find by roll button with a name that includes the word bananas.

[0:32] The name filter will look at the button text itself, as well as any accessible labels added to the button. When we hit save, our test started working immediately. There's one other approach I want to show you that works as well when you're dealing with labels.

[0:43] Const button = await screen.find by label text. Then we'll pass in that bananas regex as well. That will find any form element associated with a label that has the word bananas. In this case, because we're not filtering by button, it might be helpful to put some more precise text in here. In this case, I'll say, "Add bananas," but it works just as well. It's a helpful tool to add to our toolkit.

[1:08] React Testing Library wants you to make your code more accessible. Using aria-labels is good for screen readers, and it makes your test easier to query with React Testing Library.

egghead
egghead
~ 11 minutes ago

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

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

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!

Markdown supported.
Become a member to join the discussionEnroll Today