Cypress and React

The problem with styled components

We don’t need to do anything, in general, to test React, since the Cypress tests don’t care about the underlying framework. We do, however, have a specific problem relating to the React tools in our code. That problem is named styled components.

Styled components, which we added to our React code in the Cascading Style Sheets chapter, are lovely, but they also work by adding a dynamic, random class name to the component. Dynamic, random class names are not easy to find in a test and make assertions about.

There doesn’t seem to be a way to manage this on the styled-components side—you could imagine a test setting for styled components where the class names were discoverable, but it doesn’t look like anybody has done that.

Solution

The easiest way to get attributes that our tests can find is to add them ourselves, so we add a couple of new attributes to the ButtonSquare component inside the Seat component—if you are concerned about performance, you can make the use of these attributes conditional with not being in production, but I don’t think it’s going to be a noticeable issue in this case: