Writing tests for React-Redux Containers

Linmic
1 min readMay 6, 2017

Nowadays developers tend to believe writing tests is inevitable. In React, to test a component is relatively straightforward, but there hasn’t been a definite guide for us to test a container(connected component). Here I’m going to give some my own ideas inspired by several pioneers on this specific topic.

There are three main parts of a container, mapStateToProps, mapDispatchToProps, and connect. As we should already have our own tests for reducers, actions, and selectors, we don’t need to test them here. What we need to make sure are:

  1. Both the container and the wrapped child component should be successfully rendered.
  2. As Shawn Mealey commented on Github, make sure the keys of our states and actions being passed to the wrapped component are correct.

Here’s an example container:

Let’s write tests with Jest for it:

I think these should suffice our needs to properly test a container. As of connect, I believe it should work as advertised without testing.

Thanks to TaopaiC for reviewing this post before publishing.

--

--

Linmic

CTO @ Smartpay. Based in Tokyo. Hiring engineering talents.