[React] TDD how to stub react-redux store in tests

When doing test-driven development, it might be easier to stub the return values of APIs or async calls. But there will be cases where stubbing the states inside the store might be helpful.

Full source code can be found here.

The idea is to create an initial state of the reducer the test is interested in before each render.

Let us assume there are three different reducers.

store.js (rootReducer)

The reducer I would like to test is the cartReducer shown below.

cart-index.js (cartReducer)

Lastly, renderWithStore receives the initial cart state before the actual render. The idea is that each test or test group may have different states to begin with. Therefore, the states can be easily overridden based on what is being tested.





Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Things to consider before writing a React Native app

Test React Apps as a Pro. Part 1

Maze Creation

A Quick Guide to Redux

Refactoring Your Component with React Hooks

Creating Animations in Angular 4+


Sync I18next JSON files with just ONE Comand

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store



More from Medium

Testing DOM mutations with Jest

Understanding Context API

Reasons to Choose React as a UI Library for your application

How to migrate Javascript web apps to Typescript