React Testing with Jest / Vitest - TypeScript

Explore testing basics with an optional section that previews software tests, explains why we need them, and offers tips on writing proper tests before Jest and React Testing Library.

Explore why software tests matter: they are code that runs code, make assertions, reflect specifications, and guide unit, integration, and end-to-end testing for React components.

Apply the triple A principle—arrange, act, and assert—to structure unit tests. Compare test file organization options, such as mirroring sources or placing tests next to components, for readability.

Explore the core testing setup for React apps with Jest, Vitest, and the React Testing Library. Initialize a React project with Vite, compare test and Jest setups, and review coverage.

Introduce jest and vitest as JavaScript and TypeScript test runners, and examine react testing library's user-centric approach. Compare jest vs vitest for speed, TypeScript support, integration, plus mocking and matching.

Initialize a React TypeScript project using Vite, set it up in the target folder, install dependencies, and run the dev server while removing unnecessary assets and CSS.

Initialize a vite and vitest setup for a React TypeScript project by installing dependencies, creating setup.ts and vtest.config.ts, and writing a basic test to verify configuration.

configure react typescript with jest in a fresh v8 project, install dependencies, create setup and mock files, and write an initial test to verify the configuration.

Configure code coverage for Vitest and Jest with a coverage script in package.json or config, then run tests to generate a coverage report and review statements, branches, and lines.

Explore organizing React tests into suites, learn methods to find elements in the rendered document, and test hooks, user interactions, and errors in this section.

Learn how to organize React tests with describe blocks and it or test functions, using hooks like beforeEach and beforeAll, afterEach and after, and skip, todo, and nested describes.

Explore testing simple React components with no dynamic behavior, render them, and find elements using test IDs, roles, and within to verify content and likes.

Explore testing hooks with react testing library by verifying a useArray hook that stores an array with push, update, remove, filter, and clear, using TypeScript generics and renderHook.

Test user interaction in a React component by simulating typing, clicking, and verifying that comments are added, input clears, and multiple comments render in the post's comments container.

Learn to test error handling in React with Jest or Vitest, verify duplicates in a groceries list, and validate on-screen error messages using text matchers.

Review the halfway point and prepare for the next section on test doubles, focusing on mocks and spies; use the provided code and consult the Q&A for clarity.

Explore test doubles and their use in React testing, explaining how mocks and spies simulate behavior. Learn how to apply mocks and spies to test React components effectively.

Explore why test doubles matter, define dummies, fakes, stubs, spies, and mocks, and learn to use them in React tests with Vitest or Jest, including clearing mocks after tests.

Explore jest and vitest testing with real-world examples, validating the select item callback arguments in a shopping list. Mock external services with data for a post with comments.

Explore spies in Jest and Vitest to verify a shopping list's select item callback. Build object wrappers and use mocks to compare calls and arguments.

Replace external data services with controllable mocks to test component behavior. Practice testing initial comments loading using useEffect, act, and the React testing library with Jest or Vitest.

Use mocks and spies in React testing library to verify get comments for post calls. Mock resolved values and assert call counts and parameters with Jest or Vitest.

Mock network calls in tests by spying on axios get, returning mocked data via a data field, and simulating errors to verify error labeling.

Explore testing server calls with mock service worker (msw) as an http server in Vitest. Install msw, set up a server, mock the get method for /comments/:id, and manage lifecycles.

Explore how to test react routes and nav links in a static project using the existing react routing setup, with v7.

Set up React Router v7 for a React testing project and configure tests to simulate a browser environment by adding a global text encoder and node types, adjusting tsconfig.

Test a small react router app, focusing on the navbar staying visible, dynamic post routes by id, a page not found, and router setup with a route config and router provider.

Test the routing application by mocking small components except the navbar, render with React Testing Library, and verify the home route loads while exploring initial entries with a memory router.

Test route paths by rendering a memory router with a routes config and initial entries, then verify the home component renders and simulate navigation via the navbar.

Test nav links in a routing app by rendering with routes, using user event to click home, about, and post buttons, and asserting the corresponding components load.

Delve into snapshot testing and test driven development in this section, and participate in the Q&A to suggest topics before moving on to the next lecture.

Explore snapshot testing with react testing library, using render and as fragment to create and update snapshots, while recognizing its drawbacks and best use during big refactors.

Drive development with tests by writing them before logic, follow the red green blue triangle, start from an MVP, and add tests or snapshot tests for bugs and features.

Practice a test-driven development exercise to add a date field to post comments, sort by date, and call a back-end function on comment submission using TypeScript models.

Explore how to implement a ci cd pipeline with GitHub actions to run tests on each commit, configure workflows, and manage pull requests using basic git operations.

Learn how CI and CD automate app delivery with GitHub actions and pipelines that build, test, merge, and deploy to production, while setting up GitHub and git locally.

Implement a ci cd pipeline with GitHub actions for a Node project, configuring a workflow yaml to run npm clean install, npm test, and npm build.

Learn to implement unit testing in React and TypeScript by building test suites, writing tests, and using test doubles and mocks to ensure robust code.