[SOLVED] Test for pseudo class using Jest and React-test-renderer

Test for pseudo class using Jest and React-test-renderer

I have a few hover pseudo classes in css and want to run a test and check if they are behaving properly. Is this possible with Jest? Apologies for my lack of knowledge here I'm only a day in using Jest.

Css:

.my-btn--lg.my-btn--brand.hover, .my-btn--md.my-btn--brand:hover {
    background-color: #ac0000;
}

Solution

Seems it's impossible.

I'm not sure if jsdom provides appropriate version of window.getComputedStyle but anyway there is no way to check for styles based on pseudoclass so far. jest as generic test runner and react-test-renderer that "just" compiles JSX into HTMLElements knows nothing about pseudoclass/hover state.

See also https://stackoverflow.com/a/11495671/2071697 for details how you can parse CSS by yourselves to find :hover rule(but I believe it is not efficient way to compose unit tests)