Mastering React Testing: RTL, Vitest & MSW

Clone the course repository, install dependencies with npm, and open the preconfigured React Testing Library project. Run the dev server and execute tests to confirm setup before writing tests.

Explore the project structure for a React testing starter, including node_modules, public, and source folders, with test setup, dev and test scripts, and a ready-to-run readme.

Test a React component with TypeScript using React Testing Library to render the component, query elements with screen, and verify with expect that the text appears in the document.

Learn how Vitest orchestrates tests, discover how to test something that's not a React component, and control file selection and execution with React Testing Library for user-focused component testing.

Practice writing the first test for a component with React Testing Library, using tutorial and final folders as references and applying search by text methods to locate elements.

Learn to set up a React Testing Library test file, render a component, and use get by text, query by text, find by text, and all by text with regex.

Explore test driven development by writing a failing test first, then implementing just enough code to pass, turning red then green, illustrated with a React Testing Library example.

Learn to search by role in React testing with RTL, set up a component, manage useState and useEffect, and test role-based queries like async and error buttons.

Explore search by role in React Testing Library, using get by role, query by role, and find by role to test accessible elements via ARIA roles and screen readers.

Master and apply search by role methods in React Testing Library (RTL) to verify navigation, links, headings, images, and buttons by role and name, including async scenarios.

Explore testing user interactions in React Testing Library by building a counter and a like toggle with two button sets, and compare user event with fire event.

Learn to set up react testing library tests for user interactions, using fireEvent and userEvent, asserting initial counts, simulating clicks, and toggling like/unlike with aria labels.

Learn to test complex forms in a sandbox environment using React, useState, and the validator package to validate email, password length, and password match, with handle change and submit workflows.

Set up a sandbox test with React Testing Library to render the form and verify inputs empty. Access email, password, and confirm password by role and label to assert emptiness.

Refactor tests by creating a reusable get form elements helper and using before each to render and set up user events. Covers hooks like before all and before each.

Learn form testing by validating invalid email errors, password length, and that passwords do not match, then verify no errors and fields reset after valid submissions.

Learn to build a reviews app with a form and list, manage state with useState, validate input, and render reviews while testing with RTL, Vitest, and MSW.

Test the reviews list component with React Testing Library by rendering with empty and mock data, asserting headings, no reviews yet, and each review's text and star rating.

Demonstrate integration testing of the sandbox component by validating interactions between the form and list in the reviews app, using render, screen, and user event.

Build a Focus Flow app using test-driven development, featuring a form for title, description, and category, a task list with category tabs and remove options.

Build the core logic for the focus flow app with a custom hook to manage an item list, including TypeScript types and a utils file.

Learn to test a form component by setting up a test folder, rendering the form, validating empty fields, and verifying on submit with mocked handlers using user event.

Set up tests that simulate filling the form and submitting to verify the onSubmit handler receives the title, description, and category, and ensure required fields block submission.

Learn to test a list component in the focus flow app using RTL and vitest by mocking items, on delete, and the item card, then verify rendering and counts.

Test the focus flow app's item card: type props from utils, render title, description, and category, and verify delete calls with the id using rtl, vitest, and msw.

Refactor the app to a context API and demonstrate integration tests that verify form submissions, item management, and text rendering using a flow context provider and hook.

Learn to test a context-wrapped focus flow app using the react testing library, covering form interactions, item creation and deletion, and app-level integration tests with a flow provider.

Learn to build a posts manager app and test it with MSW, mocking API requests, and implement like and delete features alongside front-end setup across project options.

Set up the core posts state and functionality with a React hook and axios calls to localhost:4000/post. Implement create, fetch, like, and delete operations with TypeScript types and error handling.

Build a posts manager by creating form, list, and item components, wiring a usePost hook to fetch posts, handle like and delete actions, and display errors for testing with MSW.

Learn how to build and run unit tests for form, list, and item components using Testing Library, user events, and mock callbacks, covering renders, interactions, and submissions.

Set up integration tests for your app component by mocking APIs with Mock Service Worker (MSW) to run faster and more reliably, simulating server errors and edge cases.

Set up mock service worker to intercept fetch posts at localhost:4000/post, return a mock posts array via http response, and wire the server into tests to render posts.

Learn to mock remaining requests with MSW by wiring create, update, and delete post handlers, handling id params, and validating these actions with tests.

Use msw to mock http error responses and test cases in rtl and vitest, configuring get, post, put, and delete error handlers and validating messages like failed to fetch posts.

Build a web app to search GitHub users, explore profiles, repositories, and stats, using Tailwind CSS, Shazza UI, TypeScript, GraphQL with Apollo, and the GitHub API, plus testing.

Bootstrap a new React TypeScript project with Vite using npm create vite@latest in the project folder, install dependencies, and start the dev server on localhost:5173.

Builds a search form and user profile in a React app, wiring a shared username state with useState and TypeScript props for fetching and displaying user data.

Create a search form in React that uses local state with a default username, handles submit via a form event, and shows a toast when input is empty.

Learn how GraphQL works as a modern API query language, using schema, queries, fields, and arguments to fetch precise data; explore playgrounds and examples like countries, Star Wars, and GitHub.

Set up Apollo Client to query GitHub GraphQL from a React app. Generate and store a personal access token securely with dot env, and configure HTTP link and in-memory cache.

Learn to build and type a GraphQL user query with Apollo client, using useQuery, gql, and TypeScript to fetch a user's profile, repos, and stats, with error handling.

Create a reusable user card and a stats container with a stats card to display avatar, name, bio, URL, and repositories, followers, following, gists, and charts.

Create util functions to generate chart data from repository nodes and compute the top five most forked repos by fork count for display.

Calculate the top five most starred repos by mapping repository names to star counts, sorting by stars, and rendering them in the popular repos chart.

Calculate the top five most used programming languages from repository data with a TypeScript function, building a language map, sorting results, and preparing chart data.

Render and configure multiple bar charts using UI Chart in React, including grid, axes, tooltip, responsive container, and styling with chart config and color tokens for languages, repos, and forks.

Create a loading skeleton component using Qazi UI to simulate the user card and stats, customize with Tailwind CSS for responsive width and height, and display four animated skeletons.

Set up the testing environment for React Testing Library with Vitest and mock service worker, install dependencies, and configure mocks and the server.

Learn how to write tests for calculateMostStarredRepos, including handling empty input, selecting the top five by stars, and verifying descending order with mock repositories.

Set up tests for the calculate popular languages function using describe blocks and mock repositories. Verify empty input returns empty array, empty languages, top five languages, and correct language counts.

Test the stats card component by validating its title and count rendering, including zero and large numbers, using the Testing Library to define simple unit tests.

Develop a stats container component test with RTL, rendering the component with specific props (total repositories 25, followers 100, following 50, last 10) and asserting the corresponding titles and values.

Render the user card with mock avatar, name, bio, and url; verify name, bio, avatar alt and src, and the follow link. Show defaults when name or bio are missing.

Master the search form component test by rendering the form, simulating user input, and asserting that submitting an empty input triggers a mock toast while updating the username state.

Learn to test a forked repos chart component using rtl by mocking third-party chart components, rendering with mock repositories, and asserting the presence of grid, axes, bars, and tooltip content.

Test a GitHub user profile by mocking GraphQL responses with Mock Service Worker, intercepting the get user query, and validating successful and error scenarios in integration tests.

Test the user profile and app components with mocked GraphQL responses using the Apollo provider. Handle errors, mock charts, and verify bio, avatar, and GitHub links.