前端开发中，UI 是最重要的一部分，而 React 组件中的 CSS 样式则是 UI 的核心。在进行组件测试时，我们要保证 CSS 样式的正确性和一致性。那么，在使用 Enzyme 测试 React 组件时，如何测试 CSS 样式呢？
Enzyme 简介
Enzyme 是一个用于测试 React 组件的 JavaScript 工具包。它由 Airbnb 开源并维护，可以让 React 组件的测试变得更加容易、直观和有趣。 Enzyme 支持多种测试方式，其中包括：浅渲染（Shallow rendering）、静态渲染（Static rendering）和完全渲染（Full rendering）。
如何测试 CSS 样式
在测试 React 组件的 CSS 样式时，我们可以使用 Enzyme 的完全渲染（Full rendering）功能。通过完全渲染，我们可以获取到组件渲染后的结果，从而进行 CSS 样式的断言。
安装
首先，我们需要在项目中安装 Enzyme 和 React DOM：
npm install enzyme enzyme-adapter-react-16 react-dom --save-dev
配置 Enzyme
在项目中配置 Enzyme：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });示例代码
下面是一个简单的 React 组件，该组件包含一个带有样式的按钮：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------ - -- ------ ------- -- -- -
------- --------------- ------------------
-------
---------
--
------ ------- -------我们希望测试这个组件的 CSS 样式是否正确。
下面是一个使用 Enzyme 完全渲染测试该组件的样例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ------ ---- -----------
------------------ -- -- -
---------- ------ ------ ---- ------- -------- -- -- -
----- ------- - ------------- ------------ --- ----
----- ------ - ---------------------
---------------------------------------------
------------------------------------ -----
---
---上面的示例代码中，我们使用 mount 方法进行完全渲染，并使用 find 方法找到包含 CSS 类名为 .btn 的节点，并进行一些断言。
总结
通过 Enzyme 的完全渲染（Full rendering）功能，我们可以轻松地测试 React 组件的 CSS 样式。如果我们的组件中含有复杂的 CSS 样式，那么使用 Enzyme 的完全渲染功能就非常有必要了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649c1a0948841e98948e540f