Test styled components in React efficiently using ‘displayName’

How to get rid of the weird styled component names in test snapshots

Created using powerpoint

Introduction

If you practice TDD and you have been using styled-components in your React applications, this post could be for you.

This requires some previous knowledge with unit testing React code. If you want to understand the basic of unit testing, please check here.

Let’s start

Find the relevant code examples at github. Clone the repository to follow along, if you want. There are two folders with same example, one of them uses displayName for styled components, while the other doesn’t. We will start with the code which does not contain displayName to understand the issues.

Check the code here - https://github.com/anuk79/UnitTestingReactWithStyledComponents/tree/master/src/pages/without-display-name/user

The main component is user.jsx which uses some styled components.

code in user.jsx

The styled components file contains the below code:

code in user.styled.js

The problem statement

While unit testing, when we shallow render user component and generate the snapshot, we will not get the exact names for the styled components, instead we get something like below:

snapshot generated when not using displayName

What we expected: LoadingSpinnerStyled, ErrorStyled

What actually got generated: Styled(LoadingSpinner), styled.div

How does this affect unit testing process?

When we try to traverse the component tree for any assertion, and the target component is a styled component, we cannot simply use the straightforward approach of using the name of the styled component.

Let’s assume wrapper is the shallow rendered output of user component and we are trying to test if the LoadingSpinnerStyled component is indeed present in the user component. So we simply cannot do something as below:

expect(wrapper.find('LoadingSpinnerStyled').length).toBe(1);

However, if we import the LoadingSpinnerStyled component into our test file, we can test it like below:

expect(wrapper.find(LoadingSpinnerStyled).length).toBe(1);

Notice that there is no single quotes around the component name in above statement. This means that we are traversing the component tree using the actual component, rather than just the name(which is one of the benefits of using enzyme).

Or, if we want to avoid those extra imports into the test file, we will have to test the code like below:

expect(wrapper.find('Styled(LoadingSpinner)').length).toBe(1);

So, what to do if you want to avoid both of the probable scenarios:

1. Explicit imports in test file for all the relevant styled components
2. Using not-so-obvious identifiers for traversing the styled components in the component tree generated

Solution

As the title of this article might indicate, we can solve all the issues as mentioned above by just specifying displayName for all the styled components.

You can assign display names by just adding one extra line besides each component, like below:

user.styled.js

Now, when the component is shallow rendered, look at the output:

snapshot generated after using displayName for styled components

It now contains the names as we want it to be and it makes the snapshot as well as unit tests more readable and maintainable.

Check the code here — https://github.com/anuk79/UnitTestingReactWithStyledComponents/tree/master/src/pages/with-display-name/user

Conclusion

The displayName provided by React is a recommended feature which helps a lot with unit testing as well as debugging the code.

References

Read more about displayName here — https://hackernoon.com/improving-component-names-in-react-developer-tools-4894247510c5

Thanks for reading. I hope this was helpful. Please feel free to leave a response if you have any questions or suggestions.

Happy learning and have a great day!