Advice needed for component testing when supporting light and dark mode #24656
Unanswered
jnahumphreys
asked this question in
Component Testing
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hi community 👏
I'm currently working on testing my React components using Cypress component testing suite. I'd be interested in hearing thoughts from the community on the nuances of testing components that support light and dark mode themes.
Testing goals:
For each component I test for two cases: the end user and the developer (the public component API).
Part of my philosophy is to avoid testing implementation details and limiting logic within my tests. Unfortunately I've found testing components that support light and dark modes are causing some friction with the aforementioned testing goals.
Example:
Here's an example: it's a simple component to output a form
label
tag, with an optional error property. Note that the text color class name changes depending on theprefers-color-scheme
preference: black in light mode, white in dark mode and if error prop is true red for both light and dark modes.In my Cypress tests I would test that:
label
tag("have.css", "color", "#000000")
error
prop, the correct styles are applied;("have.css", "color", "red")
The above avoids testing implementation details, but would only work if I ran Cypress in light mode; running in dark mode would cause the tests to fail on test number 2.
I see three possible solutions to avoid this issue, each of which are not ideal:
How is the community testing for applications that support light and dark mode, I welcome any advice or opinions.
Thanks in advance
Beta Was this translation helpful? Give feedback.
All reactions