React Testing Library and Jest: The Complete Guide

Kick off your testing career by building a simple React app with Create React App and writing tests. Submit a name and email to add a user to the table.

Build a React app with a user form and a user list, manage users in state, and use an onUserAdd callback to add new users.

Learn to write assertions with jest and react testing library matchers, verify two inputs and a visible button, and practice entering text and submitting a form.

Test form interactions using React Testing Library and Jest by locating the submit button via aria role, clicking it, and validating the onUserAdd callback receives the correct name and email.

Introduce mock functions in Jest to verify that a callback is called with the correct arguments, by passing a Jest.fn as onUserAdd to a form and asserting calls and payload.

Learn how to query text inputs by labels with React Testing Library and Jest, using label-input pairs, get by role, and label text to build flexible, robust tests.

Learn how to locate rendered rows with the React Testing Library. Use get all by role for rows and distinguish header rows from data rows with practical debugging tips.

Discover why querying by ARIA roles can return unexpected rows in a table, and apply escape hatches such as using a data-testid with within to count rows inside a tbody.

Learn to eliminate test duplication in React testing with a renderComponent helper, avoiding beforeEach as recommended by React Testing Library, and keep tests clean and maintainable.

Practice test driven development with React Testing Library by adding a failing test that ensures the user form clears its name and email fields upon submission, then implement the feature.

Learn to locate a specific button when two elements share the same role by using the accessible name and a getByRole name filter, including case-insensitive regex for submit and cancel.

Learn how to link inputs to labels to create accessible names using input IDs and the label for attribute, and test rendering with React Testing Library.

Learn how to use accessible names for icon buttons in React testing, including aria-label fallback for SVG icons, and test sign in and sign out buttons by their names.

Learn to locate multiple elements with get all by, query all by, and find all by in React Testing Library, including synchronous vs asynchronous behavior and when to use each.

Understand when to use get by, get by all, query by, query all by, and find by in React Testing Library to verify element presence, absence, and data fetching scenarios.

Learn when to use async queries in React testing by simulating a data fetch and showing why find all by waits for content to render.

Identify elements in React Testing Library using query criteria, prioritizing by role, then by label text or placeholder text, with by test id as a last resort.

Learn to use matchers in React testing library and Jest, including dom-based assertions, custom matchers, and practical tests with getAllByRole and ARIA labels.

Implement a custom matcher for React Testing Library with Jest by defining to contain role, registering it via expect.extend, and validating element counts by role within a container.

Extract the code splaying zip, install dependencies, and start the development server to explore a starter React app that browses GitHub repositories and explains code.

Apply a real-world debugging workflow to trace a fake bug report and fix the missing primary language. Write a test to confirm the fix in the code splicing project.

Explore how the repository summary component derives stars, forks, issues, and language from the repository prop. Learn data inspection using console logs, debugger, React DevTools, and network requests.

Write a test for the repository summary component to print its language, then fix the component and rerun tests to confirm the language appears on screen.

Explore flexible getByText queries by building a dynamic RegExp to match numbers like 30 inside elements, solving tests that fail due to extra text.

Analyze how a repository object provides a GitHub URL and demonstrate testing with React Testing Library and Jest to render the component and verify the link.

Explore act warnings in tests involving data fetching inside useEffect, and learn why unexpected state updates signal flaky tests when simulating a button-driven data fetch.

Explore how the act function creates a window for state updates in tests, why wrappers are needed without React Testing Library, and how React Testing Library calls act.

Extend component tests by verifying a file icon renders with the js icon class and the top link uses the href repositories/facebook/react, ensuring the javascript icon and link behavior work.

Verify a repository link in a react component using react testing library and jest, ensuring the link to repositories/{fullName} shows owner.login and the repo name with a dynamic regex.

Fix a bug that hides Python and Java repos on the home page by adding new language tables, then discuss testing data fetching with React Testing Library and Jest.

Intercept API repositories get requests with MSW in React Testing Library tests, returning a mock items array with id and full_name, and configure server lifecycle with beforeAll, afterEach, and afterAll.

Intercept requests and customize language-specific responses to test a data-fetching component with React Testing Library and Jest. Verify each language shows two links with correct accessible names and hrefs.

Refactor to simplify MSW fake routes by introducing a create server function that accepts route configs with path, method, and a rez handler, reducing boilerplate and enabling per-test responses.

Set up tests for the auth buttons using React Testing Library, mock the auth API with a create server, and verify sign in, sign up, and sign out visibility.

Learn to set up a fake api server for tests, returning null or a user for blocks, and master jest’s execution order to ensure a single server runs.

Address act warnings in React Testing Library by refactoring with a reusable render component wrapped in a memory router and using find all by role to wait for links.

Examine how sign-in and sign-up buttons should disappear when a user is signed in, using render and query by to verify visibility and expected state, while debugging test failures.

Diagnose how the SWR library's caching in the useUser hook causes data to be reused across tests. Learn to disable or bypass caching to ensure consistent test outcomes.