I was reading “How to Create a Dark Mode Component in React” post, and thought to myself “what a great example to show Cypress component testing on!” In the future videos I will explain setting up the component testing in the project repo bahmutov/react-dark-mode, but for now, you can see one particular use case: overwriting the component’s CSS when mounting to freeze the spinning logo.
Spoiler alert ⚠️: the final code is very simple as the screenshot below shows:
So make your favorite beverage and enjoy this four-minute video!
PS: I posted a screenshot of the test because Substack is really bad at handling pre-formatted code fragments. I have a friend who works there, and he tells me Substack is using Cypress to test their site and is adding support for the proper syntax-highlighted code blocks. Cannot wait!