How 'displayName' Helps In Testing React Using Styled Components
Tech enthusiast, working as Senior Software Developer at Mediaocean
How to get rid of the weird styled component names in test snapshots
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
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.
The main component is user.jsx which uses some styled components.
The styled components file contains the below code:
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:
What we expected:
What actually got generated:
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:
However, if we import the LoadingSpinnerStyled component into our test file, we can test it like below:
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:
So, what to do if you want to avoid both of the probable scenarios:
- Explicit imports in test file for all the relevant styled components
- Using not-so-obvious identifiers for traversing the styled components in the component tree generated
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:
Now, when the component is shallow rendered, look at the snapshot generated:
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.
The displayName provided by React is a recommended feature which helps a lot with unit testing as well as debugging the code.
It also helps when we are using React devtools to inspect a component.
Read more about displayName here
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!!
Previously published at https://medium.com/@anuradha15/test-styled-components-in-react-efficiently-using-displayname-53281a0c1f2d
Subscribe to get your daily round-up of top tech stories!