Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

egghead.io

Confidently Testing Redux Applications with Jest & TypeScript

via egghead.io

Overview

Best practices for building & testing redux applications have changed dramatically over time. This course aims to be a comprehensive and up-to-date resource for those seeking to confidently test their redux apps. Whether you're just getting started or want to improve on your existing testing strategy, there will be something in this course for you.
This first few lessons of this course look at how to add jest to an existing react/redux application that was built on top of vite. We cover basic functionality like using npm test vs npx jest and generating and using code coverage to inform our testing strategy.
The next 10 or so lessons cover the specifics of unit testing the redux code in our application. We'll go over how to test reducers, selectors and thunks. As part of this we'll touch on mocking APIs and using Redux Mock Store as well as running actions through our applications' actual reducers to broaden our test coverage.
In the final part of this course we'll look at how we can test our redux connected react components using the various utilities that come with the React Testing Library. We'll cover simulating various kinds of user input with the User Event Module, populating our redux store with test data, using jest spies, how to wait for asynchronous tasks to complete, and several approaches for finding & asserting that visual elements exist on the page.
This course is built on top of content that was created for the Modern Redux with RTK and TypeScript course and I highly recommend you start there if you haven't completed it already. It does expect a basic familiarity with react, redux and jest. TypeScript is used in these lessons, but is not a major focus and hopefully won't distract you too much if you prefer plain JavaScript.
No matter your experience level with redux and testing react applications, I'm confident your abilities will level up as you watch this course and follow along with the examples.
Thank you!

Syllabus

  • Intro to Confidently Testing Redux Applications with Jest & TypeScript
  • Exploring the Sample App for the Redux Testing Course
  • Adding Jest with TypeScript Support to a Vite Application
  • Configuring Code Coverage for TypeScript Files in Jest
  • Adding Tests for a Redux Reducer
  • Adding More Test Cases for a Redux Reducer
  • Using Jest in Watch Mode with test.todo to Test a Redux Reducer
  • Unit Testing a Basic Redux Selector
  • Unit Testing a Memoized Redux Selector Built with Reselect/RTK
  • Unit Testing a Memoized Selector that Derives Data from Multiple Reducers
  • Mocking out our API Helper with jest.mock
  • Unit Testing Redux Thunks with a Mock Dispatch Function
  • Unit Testing Redux Thunks using Redux Mock Store
  • Unit Testing Redux Thunks and Associated Reducer Methods using Your App's Redux Store
  • Additional Redux Thunk Unit Tests for Increased Code Coverage
  • Intermission Pep Talk - Testing Redux Applications
  • Testing Redux Connected React Components with React Testing Library (Basic)
  • Dispatching Actions to a Redux Store to Test a Redux Connected React Component
  • Creating a Utility File for Rendering Redux Connected React Components in Tests
  • Applying our Redux Test Helpers to an Existing Component Test
  • Troubleshooting Tests with React Testing Library's Debug Helper
  • Using React Testing Library's waitFor Method to Test Asynchronous Behavior
  • Using React Testing Library's findBy Methods to Test Asynchronous Behavior
  • Simulate Clicks in a Test with the User Event Library
  • Testing Accessible Form Elements with React Testing Library's findByLabelText Query
  • Testing Visible Text with React Testing Library's getByText Query
  • Using Preloaded State from Multiple Reducers for Testing a React Component
  • Simulate Typing into Form Fields in Tests with the User Event Library
  • Testing Accessible Form Elements with React Testing Library's getByTitle Query
  • Testing Components with jest-dom's toHaveClass Matcher
  • A Comprehensive Example of Testing Redux Connected React Components
  • Concluding Thoughts on Confidently Testing Redux Applications with Jest & TypeScript

Taught by

Jamund Ferguson

Reviews

4.8 rating at egghead.io based on 24 ratings

Start your review of Confidently Testing Redux Applications with Jest & TypeScript

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.