Testing Redux with Mocha is simple, flexible and fun

What is the test case?

Well, a test case is nothing but a set of conditions under which a developer or tester can test whether the system is fully functional or not.

Why test case?

This is the most asked question by a developer who never wrote a test case before. Writing test cases are boring when you’re new to it. It may feel every time, why am I writing test cases? Well, trust me it’s the same I felt when I start learning and writing test cases, initially. Let me write the benefits about it point by point.

1. Test design helps you design how the product will be tested much like how the product is developed to work.

2. It’s a repeatable process very useful when a new tester comes.

3. You can see the whole view of your design which isn’t covered in requirements.

4. The workflow is clear when you see the test cases.

The main benefit of writing test cases is in the activity of writing them.

Now we know, why we will write test cases. Let’s dive into the code. I recommend Mocha as a testing engine. It runs in a Node Environment.

It’s very simple to install, run the command below in the project

npm install --save-dev mocha

then,

to use it with Babel

npm install --save dev babel-register

and configure it to use ES6 features in .babelrc:

{

"presets": ["es2017"]

}

Then, add this to scripts in your package.json:

{

...

"scripts": {

...

"test": "mocha --compilers js:babel-register --recursive",

"test:watch": "npm test -- --watch",

},

...

}

Run ‘npm test’ to run it once, or ‘npm run test:watch’ to check test on every change

Example:

We will test whether the correct actions are returned and fired or not.

export function showSidebar () {

return {

type: 'SHOW_SIDEBAR'

}

}

Can be tested like this

import expect from 'expect'

import actions from './actions'

import * as type from './constants' describe('actions', () => {

it('should show sidebar', () => {

const expectedAction = {

type: type.SHOW_SIDEBAR

}

expect(actions.showSidebar()).toEqual(expectedAction)

})

})

It’s a simple test case for Action creators of Redux. Very soon we’ll meet with a way of writing test cases for React components. Till then be happy, have a nice better sleep with your 100% tested Application. :)