Advanced React Testing Redux Saga and React Router

Advanced React Testing Redux Saga and React Router

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)

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 BothThe 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 AppThe 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-planTest 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 RouterThe 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). TypeScriptFollowing modern JavaScript best practices, all course code is typed via TypeScript. Proven InstructorThe 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.

Overview

Section 1: Introduction

Lecture 1 Welcome and Introduction

Lecture 2 Popular Music Venue app

Lecture 3 Notes on ESLint and Prettier Formatting

Lecture 4 How to Get Help

Lecture 5 Choice Point! Redux Saga or React Router?

Section 2: Using redux-saga-test-plan

Lecture 6 Introduction to Testing Redux Sagas

Lecture 7 Introduction to redux-saga-test-plan

Lecture 8 Introduction to logErrorToast Saga

Lecture 9 First Saga Test

Lecture 10 Code Quiz! Non-Error Toast

Lecture 11 Partial Assertions

Lecture 12 Review: redux-saga-test-plan Introduction

Section 3: Testing Complex Saga that Uses `takeEvery`

Lecture 13 Introduction to ticketFlow Saga

Lecture 14 Set up ticketFlow Saga Test File

Lecture 15 Error from not Returning `expectSaga`

Lecture 16 Mocking with `.provide()` method

Lecture 17 Dispatching Actions with `.dispatch()` method

Lecture 18 `throwError()` Method to Test Error Paths

Lecture 19 Code Quiz! Assertions

Lecture 20 Abstracting cancelTransaction Saga Tests and Network Providers

Lecture 21 Code Quiz! Purchase Error

Lecture 22 Asserting on Axios Cancel Call

Lecture 23 Testing Race Effect

Lecture 24 OPTIONAL Code Quiz! Successful Purchase

Lecture 25 OPTIONAL Code Quiz! Hold Cancel

Lecture 26 Parametrization with `test.each()`

Lecture 27 Review: Complex takeEvery Saga Tests

Section 4: Testing Saga with Fork and Cancel Effects in Infinite while Loop

Lecture 28 Introduction to Sign In Sagas

Lecture 29 Set Up signInSaga Test File

Lecture 30 Testing Successful Sign-in: .silentRun and Timeout

Lecture 31 Return Value from Network Provider

Lecture 32 Code Quiz! Sign Up Flow

Lecture 33 Integration Test for Canceled Fork

Lecture 34 Code Quiz! Error Path

Lecture 35 Introduction to redux-saga-test-plan Unit Tests

Lecture 36 Cancel Flow Unit Test

Lecture 37 Code Quiz! Unit Tests

Lecture 38 Review: Fork, Cancel, Infinite while Loop

Lecture 39 Getting Help with Saga Tests

Section 5: Testing Library Custom render: Redux and React Router

Lecture 40 ——-> Start here for React Router!

Lecture 41 Why is Custom render Necessary?

Lecture 42 Custom render Concepts

Lecture 43 Planning Custom render with Test Store

Lecture 44 Writing Custom render with Test Store

Lecture 45 Using Custom render in Tests

Lecture 46 Adding React Router to Custom render

Lecture 47 Asserting on history Object

Lecture 48 OPTIONAL Behavior Testing for Redirect

Lecture 49 Code Quiz! history.push()

Lecture 50 OPTIONAL: Redux State Code Quiz

Lecture 51 Custom router Summary

Section 6: Testing Routes with URL and Query Params

Lecture 52 Introduction to Testing Routes with URL and Query Params

Lecture 53 OPTIONAL Introduction to Mock Service Worker

Lecture 54 OPTIONAL Setting up Mock Service Worker

Lecture 55 OPTIONAL Testing “Shows” Component with Mock Service Worker

Lecture 56 OPTIONAL Code Quiz! Mock Service Worker for Sold-Out Show

Lecture 57 Testing a Route with URL Params

Lecture 58 Writing Handler for Route with URL Params

Lecture 59 Testing Page Contents for Route with URL Params

Lecture 60 Code Quiz! Page Contents of Route with URL Params

Lecture 61 Redirecting to Route with URL Params

Lecture 62 Redirecting to Route with URL and Query Params

Lecture 63 Code Quiz! Bad Query Params

Lecture 64 Review: Routes with URL and Query Params

Section 7: Testing Auth-Protected Routes

Lecture 65 Intro to Testing Auth-Protected Routes

Lecture 66 Test for Non-Protected Route

Lecture 67 OPTIONAL: Introduction to Parametrization with test.each()

Lecture 68 Parametrizing Non-Protected Page Tests with test.each()

Lecture 69 Planning Protected Route Tests

Lecture 70 Code Quiz! Redirect to Sign-In for Protected Routes

Lecture 71 Parametrizing Sign-In Redirect

Lecture 72 SignIn / SignUp Handlers for Mock Service Worker

Lecture 73 Planning Tests for Protected Route Redirect after Sign-In

Lecture 74 Starting Test for Protected Route Redirect after Sign In

Lecture 75 Getting error when you run `waitFor`?

Lecture 76 Completing Test for Protected Route Redirect after Sign In

Lecture 77 Code Quiz! Successful Sign-Up

Lecture 78 Testing Failed SignIn Followed by Successful SignIn

Lecture 79 Code Quiz! Server Error on Sign In

Lecture 80 Code Quiz! Parametrizing Unsuccessful Sign In / Sign Up

Lecture 81 Review: Auth-Protected Routes

Lecture 82 Congratulations and Thank You!

Section 8: Further Learning

Lecture 83 Bonus Lecture

Experienced React developers who want to expand their testing toolbox

Course Information:

Udemy | English | 6h 48m | 3.56 GB
Created by: Bonnie Schulkin

You Can See More Courses in the IT & Software >> Greetings from CourseDown.com