React-testing-libary userEvent 悬停不起作用？

Question

我尝试测试我的悬停是否有效，这是我要测试的代码

//styled components + typescript
const Info = styled.div`
    opacity: 0;
    width:100%;
    height: 100%;
    position: absolute;
    top:0;
    left:0;
    background-color: rgba(0,0,0,0.2);
    z-index:3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
    cursor: pointer;
`
const Container = styled.div`
    flex:1;
    margin:5px;
    min-width:280px;
    height:350px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5fbfd;
    position: relative;

    &:hover ${Info}{
        opacity: 1;
    }
`
const ProductItem = ({item}:ProductItemProp) => {
    return (
        <Container data-testid="productContainer">
            <Circle/>
            <Image src={item.img}/>
            <Info data-testid="productInfo">
                <Icon data-testid="productIcon">
                    <ShoppingCartOutlined/>
                </Icon>
                <Icon>
                    <SearchOutlined/>
                </Icon>
                <Icon>
                    <FavoriteBorderOutlined/>
                </Icon>
            </Info>
        </Container>
    )
}

export default ProductItem

我想测试当我悬停元素时不透明度是否变为1

产品.test.tsx

import userEvent from '@testing-library/user-event'
import "@testing-library/jest-dom/extend-expect";
import ProductItem from "./ProductItem";

test("Check Product Hover", () => {
  const { getByTestId } = render(
    <ProductItem item={{ id: 7, img: "https://i.imgur.com/aYMvzlX.png" }} />
  );
  const productContainer = getByTestId("productContainer");
  const productInfo = getByTestId("productInfo");

  userEvent.hover(productContainer)
  expect(productInfo).toHaveStyle("opacity:1");

});

但测试结果仍然显示 0 ，所以我不知道发生了什么，我知道这个测试有点不必要，但我是这个库的新手，我想尝试一切。

- Expected
    - opacity: 1;
    + opacity: 0;

Answer 1

如果您在 codesanbox 或类似内容中提供了可重现的设置示例，将会很有帮助，但您可能想要添加 styled-component 的jest 集成工具。

文档 - https://styled-components.com/docs/tooling#jest-integration

更多文档 - https://github.com/styled-components/jest-styled-components/blob/main/README.md

不确定这是否是问题所在，但您可以尝试一下。

前任。：

import userEvent from '@testing-library/user-event'
import "@testing-library/jest-dom/extend-expect";
import ProductItem from "./ProductItem";
import 'jest-styled-components'

test("Check Product Hover", () => {
  const { getByTestId } = render(
    <ProductItem item={{ id: 7, img: "https://i.imgur.com/aYMvzlX.png" }} />
  );
  const productContainer = getByTestId("productContainer");
  const productInfo = getByTestId("productInfo");

  userEvent.hover(productContainer)
  // expect(productInfo).toHaveStyle("opacity:1");
  // Use this instead - toHaveStyleRule is a custom matcher from jest-styled-components
  expect(productInfo).toHaveStyleRule("opacity", "1");

});