如何使用React-testing-library测试styled-components的props属性值

AI 小北

2026-10-1

问题原因

你给styled-components组件传递的index属于组件内部自定义props，默认不会被挂载到真实DOM节点上。而toHaveAttribute API 是读取真实DOM节点的属性，自然无法获取到不存在的index属性，因此返回null。

解决方案

你可以选择以下任意一种方式完成测试：

方案1：将需要测试的属性改为标准data-*自定义属性（逻辑直观，易维护）
先修改组件内Wrapper标签的写法，新增data-index属性：

<Wrapper data-testid="wrapper" index={slideIndex} data-index={slideIndex}>

再修改测试代码即可，注意DOM属性的值均为字符串类型，预期值要写字符串"0"：

test('Check render wrapper inital index value to be 0', () => {
  const { getByTestId } = render(<Slider/>);
  const wrapperCom = getByTestId("wrapper")
  expect(wrapperCom).toHaveAttribute("data-index","0")
});

方案2：直接验证最终渲染样式（无需修改组件代码，更贴近业务效果验证）
你的index属性最终作用是控制容器的transform样式，直接验证样式是否符合预期即可：
```
test('Check render wrapper inital index value to be 0', () => {
  const { getByTestId } = render(<Slider/>);
  const wrapperCom = getByTestId("wrapper")
  expect(wrapperCom).toHaveStyle("transform: translateX(0vw)")
});
```
后续测试按钮点击后的索引变更逻辑时，也可以直接验证transform值是否符合index * -100vw的计算规则，比单纯验证属性值更能确认功能实际生效。