React Testing Library中获取样式列表及选中span样式问题排查

1. 类型错误原因 #

firstElementChild返回的类型是Element，而style属性属于HTMLElement类型，TypeScript会因此提示属性不存在。需要将firstElementChild断言为HTMLElement来解决类型校验问题。

2. 样式值为空的原因 #

element.style.backgroundColor仅能读取内联样式（即直接写在元素style属性中的样式）。如果背景色是通过CSS类（比如.color）定义的，这种方式无法获取到实际生效的样式。必须使用window.getComputedStyle()来获取元素最终计算后的样式。

3. 断言方式错误 #

数组是引用类型，expect(...).toBe(...)会严格比较两个值的内存地址，即便数组内容相同但内存地址不同时，断言也会失败。应该使用expect(...).toEqual(...)来比较数组的内容。

修正后的代码 #

import { screen } from '@testing-library/react';

// 优先使用React Testing Library的查询方法替代直接操作document
const selectedColorNodes = screen.getAllByRole('generic', { selector: '.color.selected' });
const selectedColors = Array.from(selectedColorNodes).map(item => {
  // 将firstElementChild断言为HTMLElement
  const span = item.firstElementChild as HTMLElement;
  // 获取元素计算后的实际样式
  const computedStyle = window.getComputedStyle(span);
  const bgColor = computedStyle.backgroundColor;
  
  // 将rgb格式颜色转为十六进制（适配测试环境返回的样式格式）
  const hexMatch = bgColor.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
  if (!hexMatch) return '';
  const [, r, g, b] = hexMatch;
  return `${parseInt(r, 10).toString(16).padStart(2, '0')}${parseInt(g, 10).toString(16).padStart(2, '0')}${parseInt(b, 10).toString(16).padStart(2, '0')}`;
});

expect(selectedColors).toEqual(['ffffff', '000000', '7d533f']);

额外提示 #

• 尽量避免直接操作document，React Testing Library提供的screen查询方法更符合测试最佳实践，还能确保元素已挂载到DOM中。
• getComputedStyle返回的颜色格式可能因测试环境不同而变化（比如rgb()、rgba()或十六进制），需要根据实际返回格式做对应转换。

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