React Frontend Testing Course
Course on testing React applications, using React Testing Library (with Jest or Vitest). Covers everything you will need to know to be able to test your Frontend applications
This covers everything you need to know to test your frontend React applications.
From simple tasks like finding elements and asserting their text content, to more complex async behaviour, testing contexts, and more.
If you have never used Jest or Vitest, then check out the other (free) course going over the basics of testing in Jest and Vitest first!
Course Lessons
21 lessons to learn everything about React Frontend Testing
React Testing Basics
Setting Up React Testing Library
Introduction to our React Testing Library course and a demo of how to render React components and write tests for them
Rendering React components in your tests
How to get a component to mount & render in your test
The screen object
Guide to the React Testing Library 'screen' object, which lets you query your rendered components for DOM elements
The act() function
Why we have an act() function and how to use it
React Testing Library (RTL) queries
Synchronous Element Queries with React Testing Library getBy
Use getByText(), getByRole(), and other getBy queries to locate elements that must exist in your components
Getting one element vs multiple elements
How getBy... is different to getAllBy... and what happens when there isn't exactly 1 found element
Optional Element Queries with React Testing Library queryBy
Use queryByText(), queryByRole(), and other queryBy queries to safely locate elements that may or may not exist in your components
Asynchronous Element Queries with React Testing Library findBy
Use findByText(), findByRole(), and other findBy queries to locate elements that appear asynchronously in your components
Testing User Interactions
Testing interaction - userEvent vs fireEvent
The two main ways to trigger user interaction when testing React applications - userEvent vs fireEvent
Testing User Interactions (userEvent)
Simulate clicks, typing, and other interactions using userEvent to test component behaviour
Testing User Interactions (fireEvent)
How and when to use fireEvent to simulate user interactions in your tests
Component Testing Basics
Testing Props
How to test props when rendering and testing your React component
Testing Conditional Rendering
Test components that conditionally render JSX elements based on props or state values
Testing Lists and Dynamic Content
Different ways to test arrays of data rendered in JSX, including asserting order
waitFor() in React Testing Library
How to use waitFor() to wait for elements to appear or disappear, handle asynchronous updates, or test dynamic content changes in React components
within() in React Testing Library
How to use within() to scope queries to specific parts of your component, making tests more precise and avoiding conflicts when multiple elements have similar attributes
Testing Forms and Input Validation
How to write tests for form submissions, input validation, and form error message display
Testing Component Events
How to test that onClick, onChange, and custom event handlers work correctly