How to test React Redux application with Jest

In this tutorial, we’re gonna look at step by step to test React Redux application with Jest. This will apply on the application that we have built before.

Configure Jest and Babel for testing

– Install jest-cli and babel-jest:

– Open package.json, add scripts:

It helps us to run testing with cmd: yarn test.
For watching: yarn test --watchAll

– Open .babelrc, add "env":

– Run cmd: yarn install.

Now, we can run test inside filename.test.js file.
In this tutorial, we will use Jest test(), expect(), .toBe() and .toEqual() methods.

For more functions and details, please visit: Jest API Reference.

Use test function

Under project src folder, create tree like this:

react-redux-test-jest-babel-example-structure

Create test data items

data/books.js:

Actions Test

actions/books.test.js:

actions/filters.test.js:

Reducers Test

reducers/books.test.js:

reducers/filters.test.js:

Selector Test

selectors/books.test.js:

Run & Check results

Run cmd: yarn test.
Console:

react-redux-test-jest-babel-example-results

Source Code

ReactReduxTest-JestBabel

By grokonez | April 22, 2018.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*