用:: after和：hover反应测试库样式

Question

我正在尝试在NavLink组件中测试样式化组件的样式。

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

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

我想检查是否基于props正确更改了transform属性，但是不幸的是，该测试无法正常工作，因为悬停中的:: after属性也被定位了。如何避免这种情况？

    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',
      },
    );