使用Jest和React-test-renderer测试伪类

时间:2019-03-01 18:00:19

标签: reactjs jestjs react-test-renderer

我在CSS中有一些悬停伪类,想要运行测试并检查它们的行为是否正确。笑话有可能吗?抱歉,我缺乏知识,我只有一天才使用Jest。

Css:

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

1 个答案:

答案 0 :(得分:2)

似乎不可能。

我不确定jsdom是否提供了适当版本的window.getComputedStyle,但是到目前为止,仍然没有办法检查基于伪类的样式。 jest作为通用测试运行程序,react-test-renderer“只是”将JSX编译为HTMLElements,对伪类/悬停状态一无所知。

另请参见https://stackoverflow.com/a/11495671/2071697,详细了解如何自行解析CSS以找到:hover规则(但我认为这不是编写单元测试的有效方法)