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 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
Instructor
- 4.5 Instructor Rating
- 13,393 Reviews
- 84,328 Students
- 11 Courses
My teaching career started when I played school with my (not very willing) younger brother as a kid. I gradually expanded my horizons to teaching (marginally) more willing high school students, and more recently have taught software development at various boot camps to delightfully willing adults. I have been working in the software industry on and off since the mid-90s, which predates the birth of many coders in the San Francisco tech scene(!).