How to write Epic Unit Tests with TypeScript, Jest, Redux and RxJS 6

When we attempt to create some test lines for testing Epics with Redux, the task seems to be a bit painful. In this post, I am going to describe you step by step how to write an Epic Unit tests with TypeScript and the latest version of RxJS which includes a pipe helper.

First of all, I invite you to run the following command line to get a fresh new React app :

create-react-app unicorn — scripts-version=react-scripts-ts

Starting with Redux and RxJS requires to install their libraries :

yarn add redux redux-observable rxjs — save

To describe to you the logic behind Epic, I drew a little schema to make it simple. The main idea is to see it as a box receiving and sending Actions as input/output. It is a nice to have if we want to retrieve some information from services or to create a bootstrap function easily.

Let’s now switch to the exciting part. The purpose of my application is to get a Unicorn and change its colour each time I like it. There are the following actions I use:

Here are my unit tests:

I had a test with multiple observables to give you all the required keys to start your owns tests. I am using Jest to mock my service call. Finally, it gives me this epic file :

I hope it can help you if you are struggling with your TDD ?