Я пытаюсь проверить стилизованный стилизованный компонент внутри компонента 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',
},
);