How 'displayName' Helps In Testing React Using Styled Components

How to get rid of the weird styled component names in test snapshots Introduction If you practice and you have been using in your React applications, this post could be for you. TDD styled-components 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 . Clone the repository to follow along, if you want. There are two folders with same example, one of them uses for styled components, while the other doesn’t. We will start with the code which does not contain to understand the issues. github displayName displayName Check link - code The main component is which uses some styled components. user.jsx The styled components file contains the below code: The problem statement While unit testing, when we shallow render component and generate the snapshot, we will not get the exact names for the styled components, instead we get something like below: user : 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 is the shallow rendered output of component and we are trying to test if the component is indeed present in the component. So we simply cannot do something as below: wrapper user LoadingSpinnerStyled user expect(wrapper.find( ).length).toBe( ); 'LoadingSpinnerStyled' 1 However, if we import the component into our test file, we can test it like below: LoadingSpinnerStyled expect(wrapper.find(LoadingSpinnerStyled).length).toBe( ); 1 Notice that there is no 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). single quotes 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( ).length).toBe( ); 'Styled(LoadingSpinner)' 1 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 Solution As the title of this article might indicate, we can solve all the issues as mentioned above by just specifying for all the styled components. displayName 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. Check code: link Conclusion The provided by React is a recommended feature which helps a lot with unit testing as well as debugging the code. displayName It also helps when we are using React devtools to inspect a component. References 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