The React Testing Library Bootcamp - The Developer Guide

Practice test driven development with React Testing Library by writing tests for a sign-up form and building the app to pass them. Handle invalid email and password confirmation errors.

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.

Explore assertions in the React Testing Library by querying an email input with get by role, targeting the text box role, and asserting its empty value to support test-driven development.

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

Complete the test by verifying that all input fields (email, password, confirm password) are initially empty, using get by label text to reliably select password fields and avoid multiple matches.

Test user interactions by typing into an email input using React Testing Library's user events, locating the input with getByRole and getByLabelText, and asserting the value updates.

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.

Demonstrates testing form validation with the React Testing Library by rendering the app, typing an invalid email, submitting, and asserting the email error message is shown in the document.

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.

Write two React Testing Library tests to validate error handling for password and confirm password fields, using a valid email with a short password and with a mismatch.

Develop a signup test with React Testing Library that renders the form, inputs a valid email, validates password length, checks password confirmation, and notes refactoring to reduce duplication.

Combine automated and manual testing to validate a React app. Demonstrate running locally, testing email and password validations, fixing errors, and validating with valid input.

Validate the happy path by entering valid email, password, and confirm password, clicking submit, and asserting no error messages appear, while highlighting refactoring to reduce duplication in test-driven development.

Use jest hooks like before each, before all, after each, and after all to render the app once, reduce test duplication, and manage setup and cleanup.

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.

Create a helper function to locate and click the submit button, reducing code duplication in tests. Call the helper in test blocks instead of duplicating the submit button logic.

In the React Testing Library Bootcamp challenge, create a function to click the submit button, replacing blocks of code and reducing lines while improving test readability.

remove unnecessary variables to simplify tests by inlining elements in assertions, reducing boilerplate and preserving behavior, leading to cleaner, faster test suites that still pass.

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.

Learn to build and test a complex cat adoption app with React Testing Library, featuring favoriting, gender and favored filters, and server data fetched via HTTP requests.

Breaks down a React app into components: a card for name, phone, email, and favored status; plus a cards list, a filter, and a pets container that fetches data.

Learn test-driven development with the React Testing Library by building a card component, handling props, and writing focused tests for name, phone, email, and image.

verify an image element exists and its src matches the expected value using React Testing Library, exploring multiple approaches with a preview of the solution in the next video.

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.

Add heart icons and toggle logic to a testable component by importing SVGs, rendering a filled or outlined heart via ternary, and using useState to flip is favored.

Perform manual testing by rendering the card component with props, starting the app on localhost, and verifying styling, box shadow, and interactivity beyond automated tests.

build and test the cards component that renders a card for each object in an array of props, iterating to render multiple cards and querying for multiple elements.

Build a cards component using test-driven development, render multiple cards from an array, and query by role with React Testing Library, converting a div to an article for accessibility.

Create the cards component by iterating over the cats array and rendering a card for each, passing id, name, phone, email, image, and favored in a pet cards container.

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.

Build and test a filter component using new user events to update a select value when choosing favorite or gender options with testing library.

Add a filter container and label to the filter digest component, and introduce a select with favorites options (any, favored, not favored) to help tests pass.

Bring together the cards and filter components by building the pets component that fetches cats data via an asynchronous http request, then tests integration and server-side data flow.

Set up a prebuilt server to handle http requests from the client, run on localhost:4000, and fetch data from the /flashcards endpoint to render cat cards.

Build a pets component that fetches cats from a server with axios, uses use state and use effect, renders pet cards, and prepares identical tests.

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 why real HTTP requests in tests create flaky results and dependencies on the server, and how to mock them with dummy data for fast, reliable front-end tests.

Learn to mock http requests in React tests with Mock Service Worker, intercept rest endpoints, return data, and manage lifecycle hooks like before all and after all.

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

Write our first integration test for the pets component to filter by gender using user events, validating that male and female cards render correctly on the client side.

Implement gender filtering for the cat list by introducing a filters state and a filtered cats array, wiring on change through the filters component and preserving the source of truth.

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.

Fixing a typo in a React Testing Library test by changing getByRole to getAllByRole to handle multiple elements, which makes all tests pass.

Develop a test suite to filter by favorite status and gender, asserting only the male favorite cat appears and verifying the expected card at index three.

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.

Refactor your React app in the React Testing Library bootcamp to use the context API, wrapping components with a context provider, utilizing useContext for state like cats, and updating tests.

diagnose and fix failing tests by wrapping components with the mock pets context provider, refactor tests to use the provider instead of props, and ensure all tests pass.