The React Testing Library Bootcamp - The Developer Guide

Create a React application from the terminal, inspect the boilerplate, and verify components with React Testing Library by running npm run test to see a passing render test.

learn to test react applications by validating behavior over implementation, ensuring user-facing outcomes—type into inputs, submit, and see errors—regardless of underlying code.

Explore structure of a test block in React Testing Library using test with a description and callback, render the component, locate elements, and drive assertions with test driven development.

Learn to write the first React Testing Library test by rendering a component and asserting inputs are initially empty, using role or label text queries over test ids.

Create an email input within a bootstrap-styled form, adding a container, label, and input with form-control to make tests pass.

Practice implementing user event tests by typing into password and confirm password fields with React Testing Library, rendering the app, and asserting input values update accordingly.

Add a submit button and use state for live input of email, password, and confirm password, then validate the email with a validator library and show an invalid email error.

Create a reusable test helper to type into form fields and reduce duplicity in React Testing Library tests, refactoring tests to return input elements and streamline typing.

Organize tests with the describe block to group app component tests and error handling. Use before each, before all, after each, and after all inside a describe block to run setup code only for relevant tests.

Create a test block that renders the card with props, locate the image by alt text to avoid colliding images, and assert the source matches the card's image URL.

Students implement a card component that renders name, phone, email, and image from props, with a styled header and content, ensuring tests pass and preparing a heart toggle feature.

Test a card component’s heart button by asserting outlined or filled hearts based on a prop, and verify toggling with user events.

Perform manual testing by rendering the app's cards component, loading cat data from JSON, and interacting with each card to verify information and basic UI behavior on localhost.

Create a test for the pets component that renders five cards, use async/await with findAllByRole to wait for server data, and note that the initial test with getAllByRole is flawed.

Learn integration testing by evaluating how the pets, card and filter components interact within the parent pets component, distinguishing it from isolated unit testing.

Learn to use nested queries in the React Testing Library to select specific cards and mark them as favorites. Then filter by favorites and not favorites using within and getByRole.

Learn to make tests pass in a React Testing Library workflow by wiring update favorite state through cards, managing index-based updates, and syncing filter logic for favorites.

fix styling by updating the filter component, set a filter container to 20 percent width with centered text, and apply 80 percent width to each form select after importing filter.css.