时间戳

首页 > 解决方案 > 如何使用 React-testing-library 测试 styled-components 属性？

reactjs - 如何使用 React-testing-library 测试 styled-components 属性？

问题描述

我试图为我的 react-components 编写一个单元测试，所以第一步是测试 styled-components 属性的初始值，如下所示，所以功能是当用户单击按钮时，slideIndex 状态会改变，然后它会触发我的幻灯片更改为另一张幻灯片，所以我想测试 slideIndex 的初始值，并且在我触发按钮后，索引会更改以查看它是否正常工作。

<Wrapper data-testid="wrapper" index={slideIndex}>
  {sliderItems.map((item) => {
    return (
      <Slide bg={item.bg} key={item.id}>
        <ImgContainer>
          <Image src={item.img} />
        </ImgContainer>
        <InfoContainer>
          <Title>{item.title}</Title>
          <Desc>{item.desc}</Desc>
          <Button>SHOW NOW</Button>
        </InfoContainer>
      </Slide>
    );
  })}
</Wrapper>;

但是现在我坚持测试索引是否存在，这是我的测试代码

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

  expect(wrapperCom).toHaveAttribute("index",0)
});

这将返回

Expected the element to have attribute:
    index
Received:
    null

所以我假设出了点问题，或者这不是测试这个属性的正确方法？

编辑，我使用了如下索引道具

interface WrapperProp{
    index:number;
}
const Wrapper = styled.div<WrapperProp>`
    height:100%;
    display: flex;
    /* transform: translateX(100vw); */
    transition: all 1.5s ease;
    transform: translateX(${(p)=>p.index * -100}vw);

标签： reactjsreact-testing-library

解决方案

所以我找到了一份文档，其中详细介绍了如何使用“tohave...”功能https://github.com/testing-library/jest-dom#tohaveattribute，

结果是 juliomalves 提到我以错误的方式使用 toHaveAttribute ，我通过以下代码修复了它，希望这会有所帮助。

test('Check render wrapper inital translate style value', () => {
  const { getByTestId } = render(<Slider/>);
  const wrapperCom = getByTestId("wrapper")

  expect(wrapperCom).toHaveStyle("transform: translateX(100vw)")
  
});

推荐阅读