使用 Jest 进行 CSS 单元测试
使用 Jest 及相关匹配器测试 CSS-in-JS 输出，并对带样式的组件进行快照测试。
使用 Jest 进行 CSS 单元测试 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
为什么使用 Jest 测试 CSS
CSS 单元测试会以编程方式验证计算样式、类的应用和布局行为。它可以捕获 CSS 逻辑回归问题（应用了错误的类、缺少修饰符），而无需浏览器屏幕截图或人工视觉检查。
JSDOM 和 CSS 支持
Jest 默认使用 JSDOM，它对 CSS 的支持有限——不会计算布局，也不会解析复杂选择器。对于基本的类存在性和内联样式测试，JSDOM 已经足够；对于计算属性测试，请使用 jest-environment-jsdom，并配合 CSS 模块模拟。
测试类的应用
渲染组件，并断言根据属性或状态应用了正确的 CSS 类。这可以验证条件类逻辑（激活、禁用、错误变体）是否正常运行，而无需断言具体的样式值。
<button class="btn-primary">Primary Button</button>
测试中的 CSS 模块
Jest 使用 identity-obj-proxy 转换 CSS 模块导入。这个代理会为访问的任意属性返回类名字符串：styles.primary 返回 "primary"。测试可以断言类名，而不需要真正应用 CSS。
jest-styled-components
对于 Styled Components 项目，jest-styled-components 会添加 toHaveStyleRule 匹配器。可以测试样式组件是否根据属性应用了正确的 CSS 属性值，而无需真实浏览器计算样式。
<button class="btn">Enabled</button>
<button class="btn" disabled>Disabled (0.5 opacity)</button>
@testing-library/jest-dom
jest-dom 为 Jest 扩展了特定于 DOM 的匹配器：toHaveStyle（检查内联或计算样式）、toHaveClass（检查类列表）、toBeVisible（检查 display/visibility/opacity）。这些匹配器让 CSS 断言更易读、更具表达力。
类名快照测试
组件快照会捕获包含类名的渲染标记。CSS 模块重命名或条件类逻辑的变化会显示为快照差异。它适合快速捕获非预期的类变化，但需要严格执行快照审查规范。
Jest CSS 测试的局限性
Jest 无法计算布局（offsetWidth、getBoundingClientRect）、解析媒体查询或运行 CSS 动画。这些功能需要通过 Playwright 或 Cypress 使用真实浏览器环境。Jest CSS 测试可以作为浏览器测试的补充，但不能替代浏览器测试。
测试 CSS 自定义属性
在测试中为容器元素设置 CSS 自定义属性：element.style.setProperty("--color-primary", "red")。使用 getComputedStyle(el).getPropertyValue("--color-primary") 读取计算后的值。JSDOM 支持读取自定义属性，但不支持层叠。
测试动画类
验证动画触发类是否在正确的时间添加或移除：测试模态框组件打开时是否添加 animate-enter 类，以及卸载前是否添加 animate-exit 类。动画 CSS 本身通过 VRT 进行测试。
CSS 逻辑覆盖率
CSS 逻辑存在于 JavaScript 中：条件类字符串、主题提供程序值和样式对象生成。Jest 覆盖率工具（Istanbul）会覆盖这些 JavaScript CSS 逻辑。编写测试覆盖所有分支，确保每种变体和状态组合都得到执行。
知识检查
在 Jest 中与 CSS 模块一起使用时，identity-obj-proxy 的作用是什么？
摘要
使用 Jest 进行 CSS 单元测试，可以在没有真实浏览器的情况下验证类应用逻辑、条件样式和 CSS 模块行为。CSS 模块使用 identity-obj-proxy，Styled Components 使用 jest-styled-components，并使用 jest-dom 匹配器编写易读的断言。结合 VRT，可以全面覆盖 CSS 质量。
常见问题解答
「使用 Jest 进行 CSS 单元测试」课时是免费的吗？
是的 — 「使用 Jest 进行 CSS 单元测试」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「使用 Jest 进行 CSS 单元测试」这节课中我会学到什么？
使用 Jest 及相关匹配器测试 CSS-in-JS 输出，并对带样式的组件进行快照测试。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「使用 Jest 进行 CSS 单元测试」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 视觉回归测试概念
- 用于 Storybook 的 Percy 与 Chromatic
- 使用 Jest 进行 CSS 单元测试
- 可访问性测试：color-contrast 与焦点