Реагируйте на стили библиотеки тестирования с помощью :: after и: hover - PullRequest
0 голосов
/ 18 октября 2019

Я пытаюсь проверить стилизованный стилизованный компонент внутри компонента NavLink.

export const Link = styled.a`
  &::after {
    transform: ${(props: StyledNavLinkProps) =>
    props.isActive ? 'scaleX(1)' : 'scaleX(0)'};
 }

 &:hover {
   &::after {
     transform: scaleX(1);
  }
 }

Я хочу проверить, правильно ли изменяется свойство transform в зависимости от реквизита, но, к сожалению, этот тест не работает, потому что свойство :: after в hover также становится целевым. Как я могу избежать этого?

    const mockNavLinkText="test"
    const route = '/test';
    const newRoute = '/other-route';
    const { getByText } = renderWithRouter(
      <NavLink to={newRoute}>{mockNavLinkText}</NavLink>,
      { route },
    );

    expect(getByText(mockNavLinkText)).toHaveStyleRule(
      'transform',
      'scaleX(0)',
      {
        target: '::after',
      },
    );
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...