Как проверить стиль вложенных компонентов jest-styled-components - PullRequest
Новая
       39

Как проверить стиль вложенных компонентов jest-styled-components

0 голосов
/ 24 сентября 2019

Я тестирую с использованием реагирующей-библиотеки-тестирования и jest-styled-компонентов.

У меня есть компонент-обертка, который отображает стили дочерней кнопки в зависимости от выбранной пропущенной им пропуска.

Это код: 

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", что верно для исходной кнопки, однако, когда его родительский элемент передан,выбранный реквизит, к которому применяется этот стиль.

Я также выполняю тестирование моментальных снимков с компонентом, однако, не тестирование пропущенных реквизитов снижает тестовое покрытие.

Кто-нибудь может помочь?

...