Modern Front-End Development for Rails, 2nd Edition

Cypress and React

We don’t need to do anything in general to test React since the Cypress tests don’t care about the underlying framework. (Okay, Cypress has recently added a framework for testing React components in isolation. That’s interesting, but it doesn’t work with our specific setup to include here.)

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 Chapter 5, ​Cascading Style Sheets​, 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 ...