如何用React Testing Library测试hover触发的组件样式变化？

• toHaveStyle 仅能匹配元素的内联style属性值，无法读取外部样式表、内部style标签定义的样式，也不能自动识别伪类（如:hover）的生效样式
• 测试未手动触发元素的hover状态，就算样式是内联实现也无法匹配hover后的效果

方案1：测试类名变更（推荐，符合单元测试最佳实践） #

前端单元测试不需要耦合具体样式值，只要校验hover时是否正确添加了对应样式类即可，可避免后续UI风格调整导致测试用例无意义失效。
首先安装@testing-library/user-event模拟用户交互：

npm install @testing-library/user-event --save-dev

测试代码示例：

import userEvent from '@testing-library/user-event'

test('Should change style when dropdown item is hovered', async () => {
  const user = userEvent.setup()
  const dropElement1 = screen.getByLabelText('testLabel1');
  // 校验默认状态类名
  expect(dropElement1).toHaveClass('default-dropdown-item')
  // 模拟hover操作
  await user.hover(dropElement1)
  // 校验hover后是否添加激活类
  expect(dropElement1).toHaveClass('hovered-dropdown-item')
  // 模拟hover移开操作（可选）
  await user.unhover(dropElement1)
  expect(dropElement1).not.toHaveClass('hovered-dropdown-item')
});

方案2：强制校验样式值（仅特殊场景使用） #

如果确实需要验证具体样式值，可搭配window.getComputedStyle读取生效后的计算样式，注意颜色统一用RGB格式匹配：

import userEvent from '@testing-library/user-event'

test('Should have white background when dropdown item is hovered', async () => {
  const user = userEvent.setup()
  const dropElement1 = screen.getByLabelText('testLabel1');
  await user.hover(dropElement1)
  // 读取元素最终生效的计算样式
  const computedStyle = window.getComputedStyle(dropElement1)
  expect(computedStyle.backgroundColor).toBe('rgb(255, 255, 255)')
});

注意：如果使用JSDOM作为测试运行环境，需要确保测试配置开启了样式加载，否则getComputedStyle可能无法读取到样式表定义的样式，可在测试文件顶部导入对应的CSS文件，或者配置jest-transform-css处理样式导入。

• 不要用十六进制颜色值做匹配，JSDOM返回的计算样式统一为RGB格式，直接匹配RGB值即可
• 不要在单元测试中过度耦合具体样式值，优先测试交互对应的类名、属性变更，测试用例可维护性更高

内容的提问来源于stack exchange，提问作者UndisclosedCurtain