Description
In this course, you will learn:
- 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
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