React-Redux and Enzyme— An overview
I was recently working on a full blown react-redux application… everything was new, and my task was to increase the code coverage of the client application. It is a different story, to add a few components and some logic, in bits and pieces in an existing application(you will always have reference code), from understanding an existing component, so that you can write test cases for it. Although, in this case, the application wasn’t completely alien to me, as I had worked on developing a few pages there.
Let’s look at the structure of a connected react component. A connected component is the one that uses a higher order component(HOC) to give a passage way for your component to interact with the the state of your application in redux.
A sample react-redux connected component would have the following sections:
- Imports : this will have all the imports that our component needs. For example -
2. Class definition : something like —
This portion of the component contains all the code that is required to render this component of the application. It might have a form with buttons, some conditional style elements… We might be calling some external components to get the data and render the same as a list on the UI, and so on. If we have some basic understanding of jsx and java script, this is part is tolerable.
Inside the class definition, we might have some lifecycle components -
componentDidMount: method runs after the component output has been rendered to the DOM. It might be used to get the initial data required for the page.
componentDidUpdate: this gets called after the component gets rendered, when there is a change in state. It accepts an argument called ‘prevProps’. We can make decisions here, on the basis of change in the properties.
There are other lifecycle methods as well like componentWillUnmount(React.Component — React (reactjs.org)).
3. mapStateToProps : Once we are done with the class definition, we can define something called mapStateToProps, which we use to interact with the state. We can map the properties of the redux state tree, to react component props to access these within the component. It accepts the first argument called state, and an optional second argument called ownProps.
Now, we can access the ‘propertyOfState’ anywhere in the component, by just saying ‘this.props.propertyOfState’ (How cool is that!)
4. mapDispatchToProps: This is used for dispatching actions to the redux store, which in turn calls the reducer, which updates the state, which finally results in the call of all the connected components, in case there is a difference in the props, the component gets rendered again described above.
5. export: This is where we export our component using connect, like so:
export default connect(mapStateToProps, mapDispatchToProps)(SomeComponent)
connect helps our component to access the store, as discussed earlier.
This was all about our component… Now how do we test it? What if you haven’t written a single test case for a similar component before? Don’t worry… this is what this article is all about!
Let’s get past the jargons first. We will be using jest and enzyme, to unit test this. Jest(Testing React Apps · Jest (jestjs.io))— a java script testing framework that is not limited to react. Enzyme — another testing framework specifically designed for react, helps in rendering a component in the test environment(not in the document), and helps us in interacting with the component, so that we can write our familiar assert statements.
Ready for the first test class? I’m naming it ‘someComponent.spec.jsx’. Firstly, I will need to create an object that would denote my component. Something in which I can find my divs, buttons… that I want to assert on, to check if they got rendered. The component needs the store.
Step 1 : Define an object that has all the properties in the state.
If the component refers to something called state.someProperty, so my object should be :
In a react test case, when we want to mock a call, we do it by using jest.fn(). Want to mock a call like — someService.getAllIds()? Do this:
Similarly, for the state object we created above, we need to mock the state reference to its properties, to point to this object, so that when the component runs through the test case and refers to the properties of the state, it returns the property that we have defined in our data object above :
If you are wondering why defined another object called “reducers” above… it’s because we can’t just new up the store in our test class, we need to use the “createStore” and “combineReducers”(that accepts the reducers) from redux, to create our store and pass it to the Provider, that the enzyme uses to mount our component. Remember, we are doing all of this, just to create the component… we are just warming up!
Now, it’s time to define the props, that we will pass on, to our component. This object will contain the mock for all the dispatch calls we make, to the store. We made the call to someMethodCall(in snapshot for mapDispatchToProps). Our ‘props’ object will contain the mock for this call, like so:
We have everything ready now, to create our component wrapper, through enzyme, and this is how we do it :
Voila ! Now, this “enzymeWrapper” is our go to object, for all of our test cases for this component. Want to test, if the component contains a div with a class called ‘someName’? Here it is :
I’m sure you will live without me explaining the ‘describe’ and ‘it’ structure(from jest), I have used above the test case! See, it’s not that bad… we can write a basic test case for a react component without breaking much sweat!
Want to test whether the mock we set up for dispatch, got called or not? just write something like :
What if we want to test whether the component did update gets rendered if we change one of the properties? For this, we would need to make one small change in our component class.
For this, we use something called mergeProps, which, as the name suggests, is used for merging the state props, dispatch props and the own props(props coming from the test class in this case), so that the componentDidUpdate reacts to the change in these props as well.
Once we have applied this change to our component, we can write our test case, that triggers the ‘componentDidUpdate’ and asserts on the logic applied there.
say our componentDidUpdate looked like this :
We want to test in our test case, whether ‘someMethodCall’ gets called, if ‘isValid’ property is updated. In order to test this, we change the value of ‘isValid’ in our test case after we render our wrapper in the test case, which triggers the componentDidUpdate(), and results in the call of the method ‘someMethodCall’.
Hope this gave you a starting point ! thank you for reading through.