Advanced React Testing: Redux Saga and React Router

Learn to test redux sagas with the redux saga test plan, focusing on take every, code-based saga tests, and ticket flow and sign-in flow sagas.

Explore how to test Redux Saga using Redux Saga test plan, compare integration and unit testing, and learn when to mock, sequence effects, and cancel forks.

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.

Test a redux-saga log error toast with redux-saga test plan and expectSaga, showing how to pass actions and assert analytics calls in jest watch mode.

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.

Learn partial assertions in Redux saga tests by matching only the call function. Use the call dot function shortcut and remove unused imports to fix linting.

Explore redux-saga-test-plan syntax, comparing integration testing with mocks and partial matchers to unit testing that checks saga steps in order, using expectSaga and run.

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.

Create the ticket flow saga test file in the tickets feature, import saga dependencies, and use expectSaga for integration tests of the ticket flow, purchase ticket, and cancel transaction sagas.

Explore common integration tests for the ticket flow saga using expectSaga, ensuring reserve ticket server calls receive the hold reservation payload, and highlight the error when not returning expectSaga.

Master Redux saga test plans by mocking effects with the provide method, using static and dynamic providers, matchers, and star as matchers to prevent Axios calls and manage race conditions.

Dispatch actions with the dispatch method to move redux-saga forward, mock server calls, and handle aborts to avoid timeouts while testing release server calls.

Test error paths in Redux Saga by throwing a server error with throwError(), show an error toast, release hold, and reset the transaction using saga test providers and selector mocks.

Engage in a code quiz on testing redux-saga by asserting the release server call with a hold reservation and exploring abstractions for the cancel transaction saga.

Create a network providers array of static providers, override the reserve server call to throw an error, and apply the providers to the cancel transaction tests to stabilize testing.

Navigate a comprehensive code quiz that tests the purchase server error flow in redux saga, ensuring a failed purchase triggers an error toast and cancels the transaction.

Test aborting a purchase flow by asserting the axios cancel token cancels the in-flight server call in the race, and the success toast does not appear.

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.

Explore optional code quiz on the purchase ticket saga's purchase flow, testing that the purchase call wins the race, releases holds, shows a success toast, negates cancellation, and ends transaction.

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.

Parametrize tests with test.each() to run the same test for cancel and abort flows, using different action creators in a saga-driven ticket flow, and optimize test data naming.

Explore testing complex takeEvery sagas by using provide to mock, simulating network calls, and controlling selectors and errors to drive specific code paths, plus dynamic race providers and parameterized tests.

Master an infinite sign in saga watcher that forks a cancellable task and uses Redux Toolkit to manage sign in flow, status, and cancellations.

Set up a sign in saga test file, import saga and redux saga test plan, and outline integration tests for successful sign in, sign up, and canceled sign in.

Demonstrate testing the sign-in flow saga by forking the authenticate user saga, invoking the auth server call, showing loading and toast, and using silentRun to handle timeouts.

Practice a signup flow test in Redux Saga, mirroring sign in flow with a signup payload, using infinite while loops, silent run, and 25 ms timeout to validate saga behavior.

Learn to test a cancelled sign-in in a redux saga integration test by forking the authenticate user saga, issuing a cancel, and finalizing with a toast and idle status.

Test the sign in error path in redux-saga integration tests with a code quiz that uses provide to simulate a server error and asserts sign in failed with a warning.

Learn how to unit test a cancelled fork in a Redux Saga flow by driving testSaga, asserting takes and forks, and using a mock task to verify cancellation.

Practice unit tests for Redux Saga flows, distinguishing non cancel end sign in from cancel flows, using test saga to verify yields, fork, and take interactions.

Review an infinite while loop saga with a forked cancelable task, using a timeout, silent run, and a sleep helper to drive the authenticate user saga.

Explore practical strategies for testing sagas and learn how to get help with saga tests, including sharing code and GitHub repo details to get focused assistance.

Demonstrate creating a custom render for the testing library to provide Redux Toolkit and React Router contexts in tests, solving provider errors.

Learn to use a custom render function that wraps components with Redux and router providers, set an initial Redux state and router location, and render targeted components for reliable tests.

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.

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.

Learn how to implement a custom render in React Testing Library to wrap components with a Redux store and preloaded state, test user authentication flow and redirects.

Enhance the custom render with a router and Redux provider by creating a memory history and wrapping children in a router, enabling controlled route history and location assertions.

Access and assert on the history object in React Testing Library by returning a memory history from a custom render, enabling checks of history.location.pathname and redirects to sign in.

Test the redirect from the profile page to the sign in page when no user is signed in, by rendering the full app with router and redux.

Practice Redux state tests for a navbar using preloaded state to verify sign in when user is falsy and sign out with user email when user is truthy.

Compare wrapping components with the redux provider and router in app versus index.tsx to enable controlled test state and memory history with a custom render.

Test routes with URL and query params, covering initial routes and redirects, using mock service worker to mock server responses; optional lectures include setup and downloadable code.

Explore mock service worker (msw) that intercepts network calls, returns mock server responses, and lets you test selectors, Redux Toolkit query, and React Query calls with fetch or axios.

Set up mock service worker using MSW to intercept rest and GraphQL API calls, create handlers, mock responses, and configure a test server with Jest for clean test isolation.

Test the QoS component with a mock service worker to feed predictable data and avoid network calls, wrapping the component in Redux Toolkit and React Router.

Test a sold out show using mock service worker data, verify the sold out message and band name from the second show, and handle asynchronous rendering of shows.

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.

Explore dynamic request handling in React testing by mocking a route with url parameters, using Redux Toolkit query to fetch bands, and returning id-based json responses for tests.

Test that a band route with a URL param passes the param to the Redux Toolkit query, loads asynchronously, and renders the band name from fake data.

Test a protected tickets route using a URL param show ID, fetch show data with Redux Toolkit Query, and verify the band Avalanche of Cheese.

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.

Verify that clicking purchase on the tickets page redirects to the confirm route with the same show id and the correct hold id and seat count in the query string.

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 testing routes with url and query params using mock service worker, tailor responses by request data like show id, and assert on location.pathname and location.search with regex.

Test auth protected routes by verifying redirects to sign in when unauthenticated and returning to target page after login; verify non-protected routes never redirect to sign in with parametrized tests.

Execute behavior-based tests for non-protected routes by rendering the app with providers and verifying the page heading appears rather than redirecting to sign in, using parameterized tests in auth tests.

Explore test.each in jest to parametrize tests with an array of argument objects, running the same test across data variations like root path and heading match, with test name interpolation.

Parameterize non-protected page tests with test.each using an array of objects and a root path. Use mock service worker data and a regex heading match to verify shows without login.

Plan protected route tests that validate sign-in redirects and return to the original page after login, using mock service workers for sign-in and sign-up calls.

Develop and validate protected-route behavior by testing that an unauthenticated user redirected from the profile route shows the sign-in heading, with an emphasis on parameterized tests and redux state.

Parametrize tests to cover auth protected routes (tickets and confirm) with a shared sign-in header, rendering the app for each route and validating redirects when unauthenticated.

Create sign in and sign up handlers in mocks/handlers.js using a shared auth handler that returns a user with id, email, and token, then redirect to the protected page.

Plan a longer, behavior-based test of a protected route: simulate sign-in, verify redirect back to the protected page, and ensure sign-in is removed from history.

Learn to test a protected route sign-in flow by navigating to a protected page, filling credentials, and asserting a redirect to original path while removing the sign-in page from history.

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.

Perform the signup test flow to access the auth protected page, then refactor to parameterized tests using test.each, avoiding copy-paste while validating the sign up path to /ticket/1.

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.

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.

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 testing of auth protected routes, including non protected routes and redirects to sign in. Use parameterized tests and mock service workers to simulate sign in and sign up outcomes.

Celebrate completing the course with gratitude and congratulations, and commit to keeping your tests green as you apply advanced react testing with redux saga and react router.