Modern Front-End Development for Rails

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 an alpha framework for testing React components in isolation. That’s interesting, but it’s still a little too early 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 this on the styled-components ...