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

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.

There are a few packages we have to install for testing Redux components.

npm install --save-dev redux-mock-store @testing-library/react @testing-library/jest-dom

2. Create components for Redux

The middlewares most commonly used for Redux are Redux-thunk and Redux-saga. Feel free to review the difference between them if you are not so familiar with them

3. Create the test case

• Create Redux.test.js in the __test__folder

4. Clones the test cases by the npx command (optional)

• You can use the following npx command to create a default project folder for the Next.js project which also provides some test cases.

• The report for React-thunk

• The report for React-saga

Verify reducers

There is an example code in two different middlewares.

Add the code in the Redux.test.js. It is not too much difference in the reducer between Redux-saga and Redux-thunk for the component or test cases.

We can create two test cases for the single action, one is for the initial states, another one is for testing the states after triggering the action. We expect that the reducer will return the correct state and they can be compared by the following code.

expect().toEqual()

Verify actions

There is an example code in two different middlewares.

Add the code in the Redux.test.js. The difference in the action between Redux-saga and Redux-thunk is that the first one will return an object and the second one will modify the state.

We also compare the outputs of the two sides but for different expectations.

Verify saga and API

There is an example code in two different middlewares.

Create Saga.test.js in the __test__folder. The advantage of Redux-saga compared to Redux-thunk is that the saga uses a generator and yield so we can verify it step by step.

Verify the React component

There is an example code in two different middlewares.

Create Saga.test.js in the __test__folder. It’s easy to test the component by getting a specific text to verify and it’s important to add data-testid in the component before testing. We expect that it will return the correct text and they can be compared by

expect().toHaveTextContent()

Rest components

Types (won’t test it)

This file is only used to export constants we need so I believe there is no needs to test.

States and selectors (won’t test it)

This file is only used to export the initial state and the selector function.

Store (won’t test it)

References

• krawaller/LegoSetImage.js
• Testing Redux
• Jest | JOJO是你？我的替身能力是 Mock ！
• Jest | 將 Unit Test （單元測試）導入 Redux 專案 — feat.React, Enzyme
• Day19 | Component 的測試方式不私藏 — iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

Summary

Thanks for your patient. I am Sean. I work as a software engineer.

This article is my note. Please feel free to give me advice if any mistakes. I am looking forward to your feedback.

• The Facebook page for articles

• The latest side project: Daily Learning

Related topics

How to use the two-way binding in Knout.js and ReactJS?

Learn how to use SignalR to build a chatroom application

My reflection of :

IT & Network:

Database:

Software testing:

Debugging:

DevOps: