Question

使用react-testing-library和jest-styled组件进行Im测试。

我有一个包装器组件，该组件根据传递给它的选定道具来呈现其子按钮的样式。

这是代码：

const selectedStyles = css`
  background-image: url(../image);
  background-position: center;
  background-repeat: no-repeat;
  border-color: ${color.grey6};
  height: 38px;
  width: 58px;
  & span {
    display: none;
  }
`;

const ButtonWrapper = styled.div`
  & button {
    font-size: 15px;
    line-height: 20px;
    padding: 8px 12px;
    ${props =>
      props.selected
        ? css`
            ${selectedStyles}
          `
        : ""}

    &:hover,
    :focus {
      ${props =>
        props.selected
          ? css`
              ${selectedStyles}
            `
          : ""}
    }
  }
`;

和测试

  test("it renders the correct styles when selected ", () => {
    const { container } = render(<CheckButton selected>Add</CheckButton>);
    const button = container.querySelector("button");
    expect(button).toHaveStyleRule("background-position", "center");

  });

，但失败的地方是"Property 'background-position' not found in style rules"，这对于原始按钮是正确的，但是，当其父级通过选定的道具时，将应用此样式。

我也在对组件进行快照测试，但是不测试通过的道具会使测试范围降低。

有人可以帮忙吗？

Answer 1

总的来说，就嵌套样式测试而言，我建议直接测试嵌套元素。

我个人还没有想出一种使用 .toHaveStyle(``); 测试嵌套样式的方法（甚至不是一个简单的

a {
  text-decoration: none;
}

)

所以我最终查询了我想要测试的确切组件，例如：

expect(screen.getByText(/text-within-the-child-component/i)).toHaveStyle(`
   text-decoration: none;
`);

在您的具体情况下，我认为要走的路是直接在测试中使用触发您想要的样式的道具呈现您的组件（在您的代码示例中为 selected）。

如何测试嵌套组件jest-styled-components的样式

1 个答案: