Test Components in the Next.js- Part 2. Test Redux Components in different middlewares (Redux-thunk and Redux-saga)

Jen-Hsuan Hsieh (Sean)
A Layman
Published in
6 min readJan 9, 2021

--

Introduction

For achieving the target of 100% coverage for the unit test, a part of the basic work is to learn how to test Redux components which are the most commonly used for the global states managements in the Next.js/React project.

In this article, we will learn how to test Redux components with different middleware. Assume that you have known how to use Redux and Jest. You can also read the following articles for the pre-required knowledge.

This article contains the following topics

  • Preparations
  • Verify reducers
  • Verify actions
  • Verify saga and API
  • Verify the React component
  • Rest components

Preparations

1. Environment setting and packages installation

Set up the test environment for the Next.js project with Jest and Enzyme from the following article.

--

--

Jen-Hsuan Hsieh (Sean)
A Layman

Frontend Developer🚀 Angular • React • Nest • Electron • Micro-frontend • Monorepo Architecture • https://daily-learning.herokuapp.com/