在前端开发中，我们经常需要测试页面的外观和样式。从前端框架的角度来看，很多情况下我们的组件拥有了自己的样式表，并且在开发过程中我们要不停地修改样式表。那么如何保证我们的样式是正确的呢？这就需要在测试中加入对样式表的测试了，本文将介绍在测试中如何测试静态样式。
Enzyme 简介
Enzyme 是一个用于 React 的 JavaScript 测试工具库，它提供了一些常用的 DOM 操作和匹配工具，使得在测试 React 组件时更加方便和易于维护。它的 API 设计非常直观，因此您可以方便地测试组件的输出并与其他组件相集成。
静态样式测试实践
在测试静态样式时，我们需要遵循一些原则，这可以帮助我们编写更健壮的测试用例。
1. 拥抱 CSS
在测试静态样式时，我们需要保持自己对 CSS 的一些基本知识，例如如何应用基本的样式，如何选择正确的 CSS 选择器等等。这有助于我们更好地理解样式和组件之间的关系。
2. 对于不受支持的样式如何处理
对于不受支持的样式，我们需要处理好优雅降级或优雅升级的方案，确保样式与组件的实际输出是一致的。
3. 保持一致
为了避免维护工作量，我们需要保持样式表的一致性，避免出现不必要的变化。
4. 监控样式表的变化
监控样式表的变化可以帮助我们更好地调试、测试样式表。一些工具如 Stylelint，可以帮助我们去检测样式表的存在但不使用的规则，从而减少错误的出现。
5. 假设样式表中的规则应该适用于所有组件
我们应该假设样式表中的规则应该适用于所有组件。这不仅可以帮助我们更好地管理样式表，还可以使我们避免意外的错误。
接下来我们将学习如何通过 Enzyme 来测试静态样式。
示例
我们将从一个简单的示例开始，假设我们有一个 Button 组件：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ --------- ---- ------------- ----- ------ - -- ------ ------- -- -- - ------- ---------------------------------- -- ---------------- - - ------ ---------------------------- -------- -------------------------- -- ------ ------- -------
它的样式如下：
-- -------------------- ---- ------- ------ - ----------------- ----- -------------- ---- ------ ------ ------- -------- -------- ----- ----------- --- ----- - ------------ - ----------------- ------ -
如何测试它的样式呢？
它的测试用例如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ------ ---- ------------
----------------- ---- -- -- -
---------- ------ ---------- -- -- -
----- ------- - ------------- ----------- ----------- -- --- ----
----------------------------------
---
---------- ------ ---- ------- -------- -- -- -
----- ------- - ------------- ----------- ----------- -- --- ----
----- ------ - ------------------------------------
----- ------ - -------------------------
--------------------------------------------
----------------------------------------
-----------------------------------
----------------------------------------- --------
-------------------------------------------- ---- -------
---
---其中，第一个测试用例测试了组件的渲染，这里我们不做过多讲解；第二个测试用例则测试了组件的样式。
我们首先用 Enzyme 的 mount 方法创建一个包含 Button 组件的父级容器。然后使用 find 方法找到 button 元素并获取其 DOM 节点，然后通过 getComputedStyle 方法获取样式信息。最后使用 expect 语法检查每个 CSS 属性是否匹配我们的预期。
我们还可以使用类似于 jest-styled-components 或 testing-library/jest-dom 等测试工具，它们都提供了相关的链式语法——同时提供形式和可读性。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ------ ---- ------------
------ - ---- -------------------------
----------------- ---- -- -- -
---------- ------ ---------- -- -- -
----- ------- - ------------- ----------- ----------- -- --- ----
----------------------------------
---
---------- ------ ---- ------- -------- -- -- -
----- ------- - ------------- ----------- ----------- -- --- ----
----- ------ - ------------------------------------
----- ------ - -------------------------
-------------------------------------------------- --------
----------------------------------------------- -------
--------------------------------------- ---------
----------------------------------------- --------
-------------------------------------------- ---- -------
---
---这样我们就知道了如何通过 Enzyme 测试静态样式了，同时我们也需要注意需要遵循上述提到的一些关键原则来测试代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67ca57a0e46428fe9e25f6b1
