React Testing Library with Jest / Vitest

Plan a simple React app to practice testing library syntax and DOM interactions, then introduce a helper function for unit tests and a mock service worker-based ice cream sundae app.

Create a color button app to practice testing with React Testing Library and Jest, using render and getByRole to verify red initial state and blue after click.

Explore the logRoles method from testing library dom to debug roles, using render to obtain a container and inspect button roles, with practical notes for large pages.

Render the app, locate the button, and use fire event to click it. Verify the initial and post-click text and color using testing library and jest-dom.

Implement a React button that uses state to track its color, starting red, and toggles to the next color (blue) on click by updating the class name, with tests passing.

Demonstrate manual acceptance testing with TDD by running the app in development mode. Compare the UI against mockups and observe red to blue state changes at localhost:5173.

Render the app with the React Testing Library, locate the button and the disable button checkbox, and verify the initial state: the checkbox is checked and the button is enabled.

Practice coding tests through code quizzes with a spec and hints, debug using a GitHub repository, and prepare for the final exam in this React testing course.

Learn to implement a checkbox controlled button in React Testing Library with Jest / Vitest, enabling before the checkbox is checked and disabling after it is checked.

Learn how to use React Testing Library with Jest or Vitest to disable and re-enable a button by checking a checkbox, using fireEvent and a new disabled state.

Simulate user interactions to verify a button turns gray when disabled and returns to red or blue when enabled, using checkbox toggles and color assertions.

Explore unit testing of standalone functions in a React app, including creating a helper kebab-case to title-case function, grouping tests with describe, and validating edge cases with focused unit tests.

update tests to reflect new color names in the code quiz, establishing medium violet red at start and midnight blue after click, and verify regression tests for the checkbox.

Determine when to unit test functions to cover edge cases and diagnose failures, using simple helpers like kebab-case to title-case converters, reserve unit tests for complex logic and functional tests.

Review interactivity testing with fireEvent from testing library, use jest-dom assertions for button and checkbox states, get by role with name option, and decide when to unit test functions.

Explore the difference between eslint and prettier, and learn how testing library plugins extend eslint with jest dom and V test rules, and configure VS Code to use them.

Build a three-page sundae ordering app using React Testing Library, with server-sourced flavors and toppings, Mock Service Worker for test responses, and context-based global state to test user-facing behavior.

Organize and code the summary form in a React app, testing that the terms checkbox enables the order button and the terms popover disappears, within a page-based structure.

practice testing with React Testing Library and Jest to verify a checkbox enables a button; write from-scratch tests for a summary form component using get by role and red-green testing.

Build a summary form with React Bootstrap, using state to toggle the checkbox and enable the button. Style the terms and conditions label and ensure tests pass with Jest.

Learn to test a react bootstrap popover by verifying its disappearance on mouse out, using userEvent hover simulations, and distinguishing hidden versus removed elements while leveraging testing library best practices.

Replace fireEvent with userEvent in tests, set up a user instance, await user interactions, and verify popover visibility on hover using get by queries and other queries.

Learn screen query methods in React Testing Library, including get, query, find, and all, with accessible, semantic queries and test IDs considerations for robust DOM testing.

Explore testing with React Testing Library and Jest or Vitest, focusing on popovers, query by text, null checks, and hover interactions to reveal terms and conditions.

Code a popover to pass tests by wrapping a span with an overlay trigger, using mouse over, and displaying the message 'new ice cream will actually be delivered'.

Test checkbox-driven button enablement, use the user event library for hover interactions with popovers (awaiting promises in setup), and anticipate faster tests as mock service workers are introduced.

Simulate server data in tests for the order entry page using mock service worker to render scoop and topping options and mock /scoops and /toppings responses.

Learn to use mock service worker to intercept network requests, create HTTP handlers, and configure a test server to return JSON mock responses for functional tests.

Set up a mock service worker server in node for tests, creating server.js, configuring setupTest.js, and intercepting API requests with before/after hooks to reset and shut down the server.

Write tests for the options component using mock service worker to fetch scoops from the server and verify two scoop images are displayed with appropriate alt text.

Build scoop option components in a React app by fetching data with axios in useEffect, mapping items to components with image paths and alt text for testing with Testing Library.

Resolve asynchronous image loading in tests by using await findBy and wait, replacing get by with find by to handle server data fetched via axios.

Practice testing topping options with React Testing Library by mocking server responses via a service worker, adding a toppings endpoint handler, and awaiting asynchronous updates.

Plan for handling server errors by using mock service worker to return error responses, display an alert banner, and override Axios handlers for focused tests with Jest and Vitest.

Create tests that simulate server errors for scoops and toppings using mock service worker, render the order entry component, and verify two alert banners appear.

Build a reusable React alert banner with Bootstrap, using default message and variant props, then integrate it into the options component for scoops and toppings with error handling.

Learn debugging techniques for React Testing Library with Jest or Vitest, including filtering tests, running only one file, using dot only, and inspecting roles, text, and mock service worker handlers.

Override the service worker response to test error server alerts, isolate tests with test only and test dot skip, and debug service worker issues such as url mismatches.

Test how ice cream order totals update with option changes using behavior-based tests; verify scoops and toppings subtotals in options and the grand total in order entry.

Test scoop subtotal updates on the order entry page using react testing library and user events; verify starting at $0, then $2 for one vanilla, and $6 after two chocolate.

Implement an order details context to track scoop and topping counts, expose getters and setters via a provider and the useOrderDetails hook, and compute totals.

Apply a React context to track order details and display scoops subtotals, including format currency, totals, and updating item counts with a custom hook.

Wrap tests with the order details provider to supply context for the custom hook, and centralize this wrapper so isolated components render inside the provider.

Create a custom render that wraps tests with an order details provider by default, using a test-utils file to override render in React Testing Library.

Review the subtotal update by testing scoops with getByText and partial matching, using findBy for asynchronous inputs, simulating clear and type, wrapping tests in a context provider, and redefining render.

Test the toppings subtotal in this code quiz as checkboxes are toggled, starting at zero. Await asynchronous updates from the mock toppings endpoint to verify totals.

Add toppings checkboxes with a React bootstrap form group to update the toppings subtotal via an onChange handler that uses the order details context.

Explore black box testing of the grand total on the order entry page with React testing library, handling async Axios calls. Verify zero start, updates from scoops and toppings, removal.

Learn how to fix 'not wrapped in act' warnings by canceling pending network calls on unmount with an abort controller, preventing race conditions between component mount and Axios responses.

Perform acceptance testing by exploring the order entry page, selecting ice cream and toppings, and verifying options served by the Sun server while practicing input validation.

Explore the final exam harness for React Testing Library with Jest / Vitest, validating the happy-path flow through order phases from entry to review to confirmation.

Create a mock service worker post handler for the order endpoint, returning a json with a random order number and status 201, and apply delay to reveal the loading spinner.

Gain practical debugging tips for React Testing Library with Jest/Vitest, including using screen debug, logRoles, wait/find by for async actions, awaiting user events, and reading errors to pinpoint failures.

Create order confirmation component that fetches order number with useEffect and axios, shows loading until it arrives, and offers a new order button to reset and return to order entry.

Demonstrates end-to-end testing of the happy path for an ice cream order using react testing library, covering async user events, server responses, summary page checks, and unmount cleanup.

Learn how React code drives an order flow through in progress, review, and completed phases using a shared order details context and a reset sequence.

Review the final exam section and introduce the optional extra practice for React Testing Library with Jest or Vitest, including screen debug and user event keyboard typing.

Learn how to frame new tests in React Testing Library, deciding what to render, when to wrap with the order details provider, and how to structure unit and functional tests.

Render the app and verify the summary page displays toppings only when the toppings total is greater than zero, using the order details context.

Test the order entry component with React Testing Library to disable the order button until at least one scoop is ordered, using a mock set order phase and context.

Test invalid scoop count inputs with React Testing Library and Jest/Vitest. Verify the red is invalid state for negative, decimal, or over ten values, and that valid input clears it.

Learn to verify the scoops subtotal stays at zero when an invalid scoop count is entered, using react testing library with jest or vitest and provider context.

Test order confirmation page under server error by overriding the post endpoint with an msw 500 response, wrapping in the order details provider, and asserting alert and new order button.

Celebrate your completion of the demanding React testing course with well tested, diagnosable code. Share your feedback and reviews to help improve this course for future learners.