Unit Test a React Component - HashedIn Technologies

Unit Test a React Component

Technology - 18 Apr 2018
Kousick S

This article is a part of the series on how to unit test a react/redux application and is intended to cover ways to unit test a react component. I would recommend you to read the primary article before you dive into this.

What to test in a React Component

The first thing that ran in my mind when I decided to write Unit Tests is to decide on what to test in this whole component. Based on my research and trials, here is an idea on what you would want to test in your component. Having said that, this is not a rule, your use case may want to test few aspects out of this list as well.

 On a general note, if we are Unit Testing we must be performing tests on a dumb component(simple react component) and not a connected component(component connected to the redux store). A component connected to the store can be tested both as connected component and dumb component, to do this we have to export the component in our definition as a non default. Testing connected components is generally an Integration Test

Test what the component renders by itself and not child behavior

It’s important to test all the direct elements that the component renders, at times it might be nothing. Also, Ensure to test the elements rendered by the component that are not dependent on the props passed to the component. This is why we recommend shallow rendering.

Test the behaviour of the component by modifying the props

Every component receives props, and the props are sometimes the deciding attributes on how the component would render or interact. Your test cases can pass different props and test the behaviour of the component.

Test user interactions, thus testing component internal methods

Components are bound to have user interactions and these user interactions are either handled with the help of props or methods that are internal to the component. Testing these interactions and thereby the components private methods is essential.

What not to test in a React Component

What to test was simple, and probably something straight forward. We need to be well aware of what not to be tested in a React Component as a part of the Unit Tests.

Do not test PropTypes and Library functions

It does not make sense to test library functions, and those functionalities that you this should be tested as a part of the framework.

Do not test style attributes

Styles for a component tend to change, it does not give any value testing the styles of a component, and is not maintainable when styles change the test cases are bound to change.

Do not test default state or state internal to a component

It’s not important to test the state internal to the component, as this is inhibited by default and would get tested indirectly when we test user interactions and methods internal to the component.

Identifying the “Component Contract”

When we start writing test cases for a component, it would make it helpful to decide what to test and what not when we understand the “Component Contract”.

To explain how we identify the contract, let’s discuss with an example.

Consider the following page which is a component called ReferralJobs.

Here is the code snippet on how this component is written

The component is composed of three parts Search, Job Posting Container, and The Collabera Dialog. Let’s identify the contract for this component and also write test cases.

 Search is Always Rendered

The Search Container is always rendered and is not conditional on any of the props, and the search container accepts a prop as its click handler.

This can be divided into two pieces

  • Search Container is always rendered no matter what props are being passed to the container
  • A click handler is passed as a prop and we need to test if the props have been set

Let’s write a couple of test cases for the same

There are two test cases within a test suite in the above code snippet. Let’s first try to understand how the test suite is configured.

 Our describe method initializes a test suite and it can contain any number of test cases within it. It has various functions that it can handle such as afterEach, beforeEach etc. read more here.

 Within our describe method we have two initializations one called referralJobs and the other as referralJobsMounted.  These are two ways in which we can render our component on the Virtual DOM during our testing.

 Shallow Rendering

Shallow rendering is a widely used form of rendering when writing Unit Tests with Enzyme, this renders the component at one level deep and does not care about the behavior of child components. This is used when you are bothered about what is rendered in the component of interest.

Mount

Mount is a form of rendering which renders the complete component on the Virtual DOM and also returns an instance of the component,. This helps us in cases where we need to test the component level props.

In our above snippet we are also passing default props to the component so that the ReferralJobs component renders successfully.

 Moving to our test cases, we have two test cases like our identified contract, one to verify that the search component is successfully rendered and other to verify that the props set in the component is the prop that we had given it while invoking the component.

As you notice, we use Jasmine’s expect library to make assertions and this comes built in with Jest.

We pass jobs as props and ‘n’ jobs to be rendered as Paper components

The main functionality of the component is to display jobs that are given to it as props. This can again be separated into two parts.

  • ‘n’ jobs have to be rendered, as Paper objects within the Grid Container
  • Each job must display the right information on its card

To test this we have two test cases, and we pass a two job object as props in our test case.

On clicking Refer a Friend component state must change

In each job card we have refer a friend link, on clicking this link the click handler changes the state and a dialog opens.

 If you read the component code for ReferralJobs, the dialog has a prop value which is referred to the component state. When this value is true, the dialog is expected to open.

 We will need to test if when clicking refer a friend link, the state changes and test test whether the dialog prop is set to true or not.

In the above snippet we have introduced the simulate functionality, simulate is a function of enzyme that helps you trigger events on elements. In our ReferralJobs component code, the click handler for the refer a friend link is an internal component method. Thus, by performing this test we are also testing the internal private method of the component.

Components form the core of a react application, I hope this would have helped you understand how and what to unit test in a component of a react application.

 Do read Part 2 of this series that covers ‘Testing Redux Asynchronous Action Creators’.

 

E-book on Digital Business Transformation

Share
Tweet
+1
Share