在前端开发中，测试是非常重要的一环。而对于 React 组件而言，最重要的就是测试其功能和样式。enzyme 是 React 测试工具中的一种，可以很好地测试组件的渲染和交互行为。
enzyme 提供了一系列 API 可以测试组件的属性、状态、事件等等。而本文将重点讲解 enzyme 如何测试 React 组件中的 CSS 样式。
安装 enzyme
在使用 enzyme 之前，需要安装它。可以通过 npm 或 yarn 来安装：
npm install --save-dev enzyme enzyme-adapter-react-16
yarn add --dev enzyme enzyme-adapter-react-16
enzyme-adapter-react-16 是针对 React 16 版本的 enzyme 适配器。
使用 enzyme 进行样式测试
在使用 enzyme 进行样式测试前，我们需要先创建一个简单的 React 组件。在这个组件中，我们将加入 CSS 样式并测试其是否正确。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ --------------- ----- ------ - -- ---- -- -- - ------ ------- ----------------------------------- -- ------ ------- -------
在上面的代码中，我们引入了一个样式文件 button.css，它将定义 button 元素的样式。这个样式文件中只定义了一个样式：
-- -------------------- ---- ------- ------- - ----------------- -------- ------- ----- ------ ------ -------- ---- ----- ----------- ------- ---------------- ----- -------- ------------- ---------- ----- ------- --- ---- ------- -------- -
在测试文件中，我们需要引入必要的库和组件，并写测试用例。下面是一个测试用例的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
------------------ -- -- -
----------- ------ ---- ------- ------- -- -- -
----- ------- - --------------- ----------- ---- ----
----------------------------------------------------------------
------------------------------------------------------
---------------- ----------
------- -------
------ --------
-------- ----- ------
---------- ---------
--------------- -------
-------- ---------------
--------- -------
------- ---- -----
------- ---------
---
---
---在上面的代码中，我们使用了 shallow API 来浅渲染一个 Button 组件，并断言 Button 组件正确渲染了样式。其中，hasClass 判断是否应用了 button 样式，prop('style') 判断所有样式是否正确应用。
总结
正如我们在本文中所看到的，enzyme 提供了一种方便的方式来测试 React 组件的样式。使用 enzyme，我们可以方便地在测试用例中断言样式的正确性，从而保证组件的可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d0bd5db5eee0b5257b820d