An Introduction to the React Testing Library

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!

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