If you are bootstrapping your react apps with you may be aware that Jest is now baked in. Jest is yet another creation that aims to simplify writing javascript unit tests. It’s currently gaining traction and you can find really good Jest tutorials , and . create-react-app FB here here here This introductory tutorial focuses on writing tests for Redux enabled React apps, more specifically writing tests for your and . Actions Reducers Getting started: If you bootstrapped from create-react-app you may already have Jest in your project, if not you will need to add it. I am going to reference a few times in this article, replace it with if that is what you are using for Package Management. Yarn NPM yarn add jest You wont have any tests yet but from here you can run to launch the watch terminal, you will see several options: yarn test yarn test watch options Yarn has a built in regex that will search of your src folder, out of the box it searches for files that fit one of the following 3 criteria: ALL LEVELS *Files with `.js` suffix in `__tests__` folders. *Files with `.test.js` suffix. *Files with `.spec.js` suffix. OK, so lets write a simple first test. We are going to begin with testing a very simple Action creator. If you are not familiar with the difference between Actions and Action creators, read . this actions.js Here is an actionsJS file with a single const and and Action Creator: This is the Action creator that we will be testing. SET_SELECTED_ACCT setSelectedAccount(). actions.js test.js This is our test file. We import everything from our file, set a fake to test with and then begin our test. Line 5 and 6 describe our test(you could put multiple tests inside of a describe), line 8 begins our mocked expected response and line 12 executes our action and uses a to make the comparison of received vs expected. actions.js accountNumber it toEqual matcher Your terminal will output something like the following upon success, if errors there will be context for the failure in the terminal. watch options results Now let’s test a reducer. Reducers can be complex but writing tests for them is fairly simple as they are just JS functions. reducers.js reducers.js This is a simple reducer file with a single reducer: . Notice we reference the same const from out file. selectedAccount SET_SELECTED_ACCOUNT actions.js test.js This describe function contains 2 tests, line 6 and line 9. Line 6 tests for an initial state of Line 9 executes the reducer with an state(line 12) and an Action with 2 properties: and This is the same Action we tested earlier. Line 18 ensures that the reducer returns the accountNumber. selectedAccount: null. undefined selectedAccount type. That is pretty much it for this intro to testing Redux Actions and Reducers using Jest. We added Jest to our project, created tests for an Action creator and a Reducer in our file and took a look at some of the terminal inputs and outputs for navigating Jest tests. test.js Currently listening to: Additional Resources: Jest Docs Testing with Redux and Jest Let me know your thoughts on . Keep after it. twitter If you like this article, please recommend it to help others find it!

Facebook

Twitter

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Redux unit testing with Jest

Too Long; Didn't Read

Companies Mentioned

Ben Garrison

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Redux unit testing with Jest

Too Long; Didn't Read

Companies Mentioned

Ben Garrison

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES