Testing React apps with React Testing Library (RTL)

Create a React app with TypeScript using Create React App, and explore behind the scenes setup, including dev dependencies like Jest and Testing Library, yarn start and build, and eject.

Set up and run React tests with jest and React Testing Library by understanding dev dependencies, TypeScript integration, and .test.tsx file naming with yarn test.

Explore test driven development foundations by writing a first test for a simple sum function, using a describe suite, should-named tests, and Jest expect assertions; refactor to handle negatives.

Learn to select elements in React tests using getByText to verify rendered text, and compare implicit and explicit assertions, error handling, and regex matching.

Learn how to use getByRole in React Testing Library to select elements by their accessibility role, including implicit roles like text box for input, with examples using labels and placeholders.

Learn how query by fits alongside get by in React Testing Library, exploring query by role and other search variants, and how non-existent elements return null for robust assertions.

Learn how to test asynchronous elements using the findBy search variant in RTL by mocking an API, awaiting user data, and asserting conditional rendering in a React component.

Learn to write more meaningful tests by mocking the get user function, refactoring into a dedicated module, and using waitFor to validate a single API call and avoid side effects.

Explore the find by text variant in rtl by mocking the get user function, rendering the app, and using find by text to await and verify asynchronous user data.

Learn to query multiple elements with react testing library using get all by text and get all by role, plus label and placeholder text selectors, and verify counts for tests.

Learn to simulate user interactions with fireEvent in React Testing Library, typing into inputs and validating on-screen display, and compare RTL's user-focused approach with enzyme's internals.

Use the user event API to simulate browser interactions in RTL tests, replacing fire event with await userEvent.type on a textbox retrieved by getByRole, triggering change and key down events.

Learn how to measure and optimize test coverage in a React app using RTL, including running yarn test --coverage, mocking API calls, and configuring coverage in package.json.

Debug React tests with Chrome and Visual Studio Code by adding a Launch.json, running Jest in band, and using the debug console to inspect results.

Create a Pokemon component that fetches data from the pokemon api with axios, manages name, abilities, and error state, and renders the abilities.

Learn to test the Pokemon component in a React app using RTL, mocking Axios to verify that valid names display abilities and invalid names show an error, achieving full coverage.

Learn about the jest-dom library from React Testing Library, adding matchers like toBeDisabled, toBeEnabled, toBeInTheDocument, toContainElement, and toHaveFocus for frontend tests; install as a dev dependency.