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!

• 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