Testing Common Redux Patterns in React Using AVA

Testing common #Redux patterns in #ReactJS using AVA:

  • Let’s configure the Redux store using our root reducer.
  • As the second argument, we are passing the action which toggles the state of the todo with the given id .
  • When dispatched, the action will cause a todo item of a given id to switch its state, for instance from completed to not completed.
  • /actions’ ; const store = configureStore ({ todos : [ { id : 0 , completed : false , text : ‘buy milk’ }, { id : 1 , completed : false , text : ‘walk the dog’ }, { id : 2 , completed : false , text : ‘study’ } ] }); store .
  • Reducers react to dispatched actions by modifying the store.

This is the second tutorial in our series on testing React and Redux applications.
If you haven’t read the first part, we encourage you to do so.

@ReactiveConf: Testing common #Redux patterns in #ReactJS using AVA:

This is the second tutorial in our series on testing React and Redux applications. If you haven’t read the first part, we encourage you to do so.

Redux is a library for managing state in React applications. Since the code using Redux is composed of many small pieces, it’s very easy to test it. In the previous tutorial, we scaffolded the base for our application and set up AVA. In this tutorial, we will start building our todo application by defining and testing common Redux patterns, learn about basic Redux concepts, and write tests for them.

For this tutorial, you will need to:

to switch its state, for instance from completed to not completed.

to ensure that the test passes.

action:

We are exporting individual reducers for testing, and the root reducer for the application.

Let’s test this reducer:

to see if our test passes.

Selectors are not as common as actions and reducers, but they are a very convenient way of fetching resources out of the Redux store. They make refactoring easier, we can memorize them with libraries like reselect, and, most importantly, we can test them.

A selector looks as follows:

to retrieve the list of todos.

works as well.

to see if this test passes.

Finally, let’s configure the Redux store using our root reducer. We’re also going to add redux-logger as middleware in the development mode to help with debugging. This will log dispatched actions and store changes to the console of our browser’s developer tools:

is an environment variable built into create-react-app, and we can use it to alter behavior of our application as needed. In this case, we are logging Redux only in development.

Start your application by running:

We should see the following in the console:

action successfully completed a todo!

In this tutorial, we learned how to test Redux actions, reducers, and selectors. We now have everything we need to test synchronous Redux code. You can apply this knowledge to testing asynchronous code (a.k.a. “side-effects”) as well. For example, dispatching an action could cause an API call, a confirm dialogue, or even dispatching another action.

In the next and final tutorial we will create React components, connect them to the Redux store, and build a simple user interface for our todo application.

If you have any questions or comments about this tutorial, feel free to leave them in the section below.

Testing Common Redux Patterns in React Using AVA