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.

Create a two-field user form with React useState to track name and email, wiring inputs with onChange, preventing default on submit, and pass data to the app component.

Master rendering a dynamic user list in React by managing a users state, handling add events, and displaying names and emails in a table for Jest tests.

Learn to write the first test for a React form by rendering the user form component, asserting two inputs and a button, and confirming the onUserAdd callback prop is invoked.

Render components in a Node.js environment with JS Dom, then use the screen object and query functions such as get by role and get all by role to locate elements.

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.

Demonstrate how to test a form with react testing library and jest by typing a name and email, submitting, and verifying the on user add callback receives the data.

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.

Test the user list component with React Testing Library and Jest, ensuring one row per user and rendering of name and email from the users prop in a two-column table.

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.

Explore the fallback to testing with role selectors when needed. Use container and querySelector to locate table rows, and learn when get by role or test ids saves time.

Render a list of fake users in a table and verify each name and email appears using React Testing Library and Jest.

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.

Render the app component to test the full flow from the user form to the user list, fill the name and email, then submit and verify the new user appears.

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.

Implement the user form feature by resetting email and name after submission, and demonstrate test writing with render, get by role queries, and assertions using Jest and React Testing Library.

Explore RTL Book, an interactive cheat sheet for the React Testing Library course that lets you write small components, test them, and save notes at localhost:4005.

Explore using the RTL notebook environment to write and preview React testing library tests with markdown notes, code cells, and cascading execution, leveraging render, tests, and assertions.

Learn to locate elements in React Testing Library tests using role selectors by iterating a roles array and asserting each element is in the document.

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 use react testing library query functions get by, get all by, query by, and find by, and distinguish single versus multiple element results and synchronous versus asynchronous behavior.

Explore how getBy, queryBy, and findBy in React Testing Library (and Jest tests) behave when elements are missing, using a small color list component to test roles and accessibility.

Master single queries in React Testing Library with get by, query by, and find by; learn how to handle one vs multiple elements, async tests, and role-based selectors.

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.

Explore when to use each React Testing Library query suffix—from get by role and by label text to by placeholder text, display value, text, alt text, title, and test id.

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

Use within queries to ensure a form contains two buttons, even after adding outside elements, and introduce a custom matcher to automate this test.

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.

Learn to test a repository component by asserting multiple properties such as language, stars, forks, and open issues using a loop over object keys in React Testing Library and Jest.

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

Address the next bug by adding a GitHub link to each repository in the search results, while exploring module mocking, navigation handling, and the act function in React testing.

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.

Wrap test renders with a router context to satisfy react-router-dom links when testing React components, using a memory router to provide navigation context in a testing environment.

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.

Learn to handle act warnings in React Testing Library tests by avoiding act calls and using RTL's findBy, findAllBy, and waitFor to wait for asynchronous state changes.

Learn to solve the act warning in React testing by using findBy or findAllBy to wait for a component’s data fetch, illustrated with a file icon and a javascript image.

Use a module mock to bypass problematic dependencies and avoid act warnings in React Testing Library tests; mock the file icon module so the repositories list item renders without warning.

Explore the absolute last-ditch act solution in React Testing Library to understand its behind-the-scenes behavior and why it’s discouraged, alongside preferred find by approaches.

verify that the repository link on the right renders with the correct href to the GitHub repository using react testing library and jest, asserting href equals repository.html_url.

Implement a GitHub repository link in the repositories list item with an accessible aria-label, add a GitHub icon, and adjust tests to select by role and name.

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.

Explore testing data fetching in React with the testing library and Jest, focusing on the use repositories hook, SWR, and axios. Learn module mocking and strategies to keep tests fast.

Learn to mock network requests in tests with msw by intercepting fetch or axios calls and returning mock repository data, while wiring the handler into tests.

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.

Demonstrates testing a react app with jest and react testing library by awaiting the fake network responses, wrapping components in a memory router, and asserting two language links per table.

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.

Learn to design reusable fake API handlers in testing with React Testing Library and Jest, avoiding single shared responses and enabling component-specific test scenarios.

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.

Implement a reusable create server function that maps config objects into msw handlers, sets up a fake server with before all and after hooks, and simplifies test route definitions.

Test header authentication buttons by simulating sign in and sign out, using the useUser hook with SWR data fetching and Axios, while diagnosing and solving a tricky SWR bug.

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.

Use nested describe blocks to scope tests and run servers only for specific tests, with before all and after all hooks, separating not signed in and signed in scenarios.

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.

Demonstrates testing auth links with React Testing Library and Jest, using a shared async render and asserting sign in and sign up links appear with accessible names and proper hrefs.

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.

debugging strategies for failed tests in react testing with jest, using describe.only and test.only to isolate tests, observing interplay between blocks, and setting up a debugger to narrow causes.

Set up and use a debugger to pause test and component execution, inspect variables, and step through rendering with a test: debug script and React scripts inspect via about:inspect.

Use a debugger to inspect tests in React Testing Library and Jest, tracing how user state moves from undefined to null or a user object, revealing test leakage.

Remove debugger statements, add console logs to verify server requests, and trace data flow from the component to the fake API server, focusing on the useUser hook.

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.

Solve caching issue by resetting SWR cache between tests using a SWR config provider with an empty map, ensuring each render fetches fresh data from the fake API.