In 2018, Kent C. Dodds wrote: "The more your tests resemble the way your software is used, the more confidence they can give you." This phrase became the guiding principle for the entire Testing Library ecosystem.
A few years later, the React Testing Library became the de facto library for writing unit and integration tests in the React ecosystem.
Thanks to its user-centric perspective, our tests are closer to our user experience and far away from implementation details.
In this course, you will learn how to:
- render your components
- properly query your UI for elements while keeping accessibility and your users' experience in mind
- improve your testing experience with the usage of some utilities
- interact with your components to fire events
- leverage asynchronous utilities to customize your testing flow
- get rid of the annoying "not wrapped in act" warning
After this course, you should be able to write and debug any test using the React Testing Library!
Overview
Syllabus
- Render a Component Using the React Testing Library
- Use the getBy Query to get Elements that Should Always be on the Page
- Use the queryBy Query to get Elements that Won't Always be on the Page
- Use the findBy Query to get Elements that Will Show up on the Page
- Use the AllBy variant to get Multiple Instances of an Element
- Get Elements Exposed in the Accessibility Tree Using the byRole Query
- Get Elements Associated With a Label Using the byLabelText Query
- Get Elements With a Given Placeholder Text Using the byPlaceholderText Query
- Get Elements With a Matching Display Value Using the byDisplayValue Query
- Get Elements With a Given Text Match Using the byText Query
- Get Elements With a Matching Title Attribute Using the byTitle Query
- Get Elements With a Matching alt Text Attribute Using the byAltText Query
- Get Elements With an Associated Test id Attribute Using the byTestId Query
- Constrain a Query to a Specific Element Using Within
- Use the Screen Object to Avoid Query Destructuring From Render
- Check to Current Way Your Component Looks Using Debug
- Use the Testing Playground to Help Decide Which Query to Pick
- Fire a Single Event on an Element Using fireEvent
- Simulate All User Interactions With an Element by Using the user-event Library
- Leverage the waitFor Async Util to Await for an Assertion to Pass
- Use the waitForElementToBeRemoved Async Util to Await Until an Element Disappears
- Get Rid of the "not wrapped in act(...)" Warning
Taught by
Daniel Afonso
