Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Advanced React Testing: Redux Saga and React Router

Name: Advanced React Testing: Redux Saga and React Router
Rating: 4.6 (181 reviews)

Level-up your React testing skills to include Redux Saga, React Router and Auth-Protected Routes!

Created byBonnie Schulkin

Last updated 9/2023

English

What you'll learn

Test Redux Sagas with redux-saga-test-plan integration and unit tests
Create a custom React Testing Library `render` method for Redux store and React Router history
Test React Router navigation, including routes with URL params and query params
Test auth-protected routes in React apps that use React Router
Use Mock Service Worker to mock network responses during tests
Use Jest's .each() method to parametrize tests (run the same test multiple times with different data)

Course content

8 sections • 83 lectures • 6h 46m total length

Welcome and Introduction4:37
Popular Music Venue app9:13
Notes on ESLint and Prettier Formatting1:18
How to Get Help2:04
Learn how to get the best help in the Udemy Q&A by asking clear questions, sharing your code with a GitHub link, and reviewing featured questions to accelerate learning.
Choice Point! Redux Saga or React Router?1:19

Introduction to Testing Redux Sagas4:07
Introduction to redux-saga-test-plan3:08
Introduction to logErrorToast Saga2:39
Explore how the logErrorToast saga watches the start toast action, detects error toasts, and sends those events to analytics before rendering the toast in the app.
First Saga Test9:25
Code Quiz! Non-Error Toast4:33
Practice a code quiz by writing a test for a non error toast that does not trigger analytics, using an info toast payload and a negated assertion.
Partial Assertions3:34
Review: redux-saga-test-plan Introduction2:37

Introduction to ticketFlow Saga4:03
Explore advanced Redux Saga testing with test plan syntax, mocking, and action dispatching to drive ticket hold, ticket flow sagas, and flow charts; include Jest parameterization.
Set up ticketFlow Saga Test File2:51
Error from not Returning `expectSaga`5:57
Mocking with `.provide()` method5:56
Dispatching Actions with `.dispatch()` method4:10
`throwError()` Method to Test Error Paths7:53
Code Quiz! Assertions4:51
Abstracting cancelTransaction Saga Tests and Network Providers3:57
Code Quiz! Purchase Error9:29
Asserting on Axios Cancel Call7:13
Testing Race Effect4:52
Learn to test a redux-saga race between purchase result and abort, forcing abort to win with a dynamic provider and a race matcher, and explore optional quizzes and testcase parameterization.
OPTIONAL Code Quiz! Successful Purchase5:30
OPTIONAL Code Quiz! Hold Cancel6:19
Explore handling the cancel path in a redux-saga flow for ticket holds, including server holds, navigate-away scenarios, cancel and abort actions, and notification toasts, with tests using jest test.each.
Parametrization with `test.each()`9:26
Review: Complex takeEvery Saga Tests2:24

Introduction to Sign In Sagas7:48
Set Up signInSaga Test File2:27
Testing Successful Sign-in: .silentRun and Timeout10:41
Return Value from Network Provider4:42
Code Quiz! Sign Up Flow4:58
Integration Test for Canceled Fork9:58
Code Quiz! Error Path4:03
Introduction to redux-saga-test-plan Unit Tests3:53
Cancel Flow Unit Test7:59
Code Quiz! Unit Tests6:01
Review: Fork, Cancel, Infinite while Loop2:33
Getting Help with Saga Tests2:27

-------> Start here for React Router!0:03
Why is Custom render Necessary?5:06
Custom render Concepts4:35
Planning Custom render with Test Store4:41
Create a per test redux store using the production store creator, wrap the UI in a redux provider with initial state, and export a custom render from test utils.
Writing Custom render with Test Store8:06
Write a custom render for testing React components with the testing library, wrapping them in a redux provider and test store with optional preloaded state and TypeScript types.
Using Custom render in Tests4:35
Adding React Router to Custom render6:46
Asserting on history Object8:03
OPTIONAL Behavior Testing for Redirect4:17
Code Quiz! history.push()8:15
OPTIONAL: Redux State Code Quiz3:22
Custom router Summary4:01

Introduction to Testing Routes with URL and Query Params0:59
OPTIONAL Introduction to Mock Service Worker2:23
OPTIONAL Setting up Mock Service Worker8:26
OPTIONAL Testing "Shows" Component with Mock Service Worker9:50
OPTIONAL Code Quiz! Mock Service Worker for Sold-Out Show2:19
Testing a Route with URL Params3:09
Learn to test a band page route with URL parameters by rendering the app, setting the route history, and mocking server data via service worker endpoints.
Writing Handler for Route with URL Params4:33
Testing Page Contents for Route with URL Params4:46
Code Quiz! Page Contents of Route with URL Params5:19
Redirecting to Route with URL Params7:57
Test that clicking the tickets button on the shows page pushes the correct tickets route with the show id, illustrating unit tests for routing with URL parameters.
Redirecting to Route with URL and Query Params11:52
Code Quiz! Bad Query Params3:53
Write tests for bad query params, ensuring the app redirects to tickets and show id when hold id or seat count are missing, including auth protected routing and app rendering.
Review: Routes with URL and Query Params2:08

Intro to Testing Auth-Protected Routes2:32
Test for Non-Protected Route5:22
OPTIONAL: Introduction to Parametrization with test.each()2:31
Parametrizing Non-Protected Page Tests with test.each()8:02
Planning Protected Route Tests3:26
Code Quiz! Redirect to Sign-In for Protected Routes2:54
Parametrizing Sign-In Redirect2:50
SignIn / SignUp Handlers for Mock Service Worker6:22
Planning Tests for Protected Route Redirect after Sign-In4:19
Starting Test for Protected Route Redirect after Sign In6:21
Getting error when you run `waitFor`?0:08
Completing Test for Protected Route Redirect after Sign In5:51
Finalize redirect for protected routes after sign in by testing the sign-in form with a data test id, using get by test id and get by role.
Code Quiz! Successful Sign-Up5:00
Testing Failed SignIn Followed by Successful SignIn9:52
Test the sign-in flow from a failed sign-in to a successful sign-in using mock service worker and reset handlers, parameterizing server errors to ensure protected routes load correctly.
Code Quiz! Server Error on Sign In3:17
Execute a code quiz that tests handling a 500 server error during sign in, by deleting and rewriting tests from scratch, resetting handlers, and verifying redirection and history updates.
Code Quiz! Parametrizing Unsuccessful Sign In / Sign Up4:47
Parametrize test scenarios for sign in and sign up, including server errors, an incorrect password, and 400 responses like email already in use, using mock service worker and response resolvers.
Review: Auth-Protected Routes1:54
Congratulations and Thank You!0:26

Requirements

Familiarity with React and React Hooks (both custom hooks and built-in hooks such as `useEffect`)
Experience writing tests with Jest
Basic familiarity with React Testing Library (specifically `render` and `screen` methods)
Redux and Redux Saga usage (Saga sections only)
React Router usage (React Router and Auth-Protected Routes sections only)
Familiarity with TypeScript (the course is written and taught entirely in TypeScript)

Description

Are you a developer who's learned the basics of React testing and wants to move to the next level? This course dives deep into React testing for sophisticated apps.

Test Redux Saga, React Router or Both

The Redux Saga and React Router sections of the course are completely separate. You can choose which technology to start with, and skip the sections for technologies that aren't relevant to your app.

Test an Existing App

The app for the course is already built, so you'll be testing an existing app that utilizes Redux Saga and React Router (with Auth-Protected Routes). For an added bit of fun, the app is for a music venue that sells tickets to shows for fake bands, complete with fake band names, plus randomized band descriptions and photos.

redux-saga-test-plan

Test Redux Sagas with the redux-saga-test-plan library, a powerful module that allows flexible integration testing and precise unit testing. The course covers the `provide()` method for static and dynamic effect mocking.

React Router

The course creates a custom `render` method for Testing Library to write tests that can assert either on page behavior or the React Router `history` object. Tested routes include URL and query params, and the flow for auth-protected routes (including removing the sign-in page from the history). Mock Service Worker provides mocked data for network calls to the server.

Jest's test.each()

In both the Redux Saga sections and the React Router sections, the course teaches Jest's test.each() method for parametrizing tests (that is running the same test multiple times with different data).

TypeScript

Following modern JavaScript best practices, all course code is typed via TypeScript.

Proven Instructor

The instructor for this course has been writing courses for Udemy since 2018, and has a great track record of courses that are clear and easy to follow. She loves interacting with students via Q&A and has a calm, supportive teaching style.

Who this course is for:

Experienced React developers who want to expand their testing toolbox

Advanced React Testing: Redux Saga and React Router

What you'll learn

Explore related topics

Course content

Introduction5 lectures • 19min

Using redux-saga-test-plan7 lectures • 30min

Testing Complex Saga that Uses `takeEvery`15 lectures • 1hr 25min

Testing Saga with Fork and Cancel Effects in Infinite while Loop12 lectures • 1hr 8min

Testing Library Custom render: Redux and React Router12 lectures • 1hr 2min

Testing Routes with URL and Query Params13 lectures • 1hr 8min

Testing Auth-Protected Routes18 lectures • 1hr 16min

Further Learning1 lecture • 1min

Requirements

Description

Who this course is for: