时间戳

首页 > 解决方案 > 如何使用 Jest 和 Enzyme 测试 React 组件的 CSS 类中的样式？

reactjs - 如何使用 Jest 和 Enzyme 测试 React 组件的 CSS 类中的样式？

问题描述

在 CSS 中考虑，

.content
{
    width:500px;
    box-sizing: border-box;
}

我在 react 组件中添加了这个 css 类，如下所示

const Banner = () => {
   return (<div className="content">This is message content</div>);
}

如何编写 jest 和酶测试用例以确保正确应用带有“border-box”的“box-sizing”？

注意：我可以编写测试用例来确保将“.content”类添加到该元素中。但确切地说，我需要编写测试用例来确保“box-sizing”中的值。

标签： reactjsjestjsenzyme

解决方案

我不确定如何解决您的问题，但请记住您的测试不会涵盖

* {
  box-sizing: border-box;
}

如果您将在其他地方定义。

从我的角度来看，测试样式没有意义，因为我们不能从测试的角度保证元素看起来像我们想要的那样。因此，您仍然需要打开浏览器并检查您的元素是否正常工作，但您正在编写测试来避免它。

推荐阅读