the function ToHaveStyleRule doesn't work with hover

user_15413526 0
Viewed 409

I created a component to be an Icons wrapper, so I don't need to keep editing the icon in the style of the file I use... However, when testing a property that can be applied to the "hover" component , the test says that this property does not exist, even passing!

file index

export type IconsProps = {
  hoverColor?: colorTypes
}
const Icons = ({ hoverColor }: IconsProps) => (
  <S.Wrapper color={color} size={size} hoverColor={hoverColor}>
    {children}
  </S.Wrapper>
)

file style

const wrapperModifiers = {
  hoverColor: (theme: DefaultTheme, hoverColor: colorTypes) => css`
    & :hover {
      color: ${theme.colors[hoverColor]};
    }
  `,
}
export const Wrapper = styled.main<IconsProps>`
  ${({ theme, hoverColor }) => css`
    > ${StyledIconBase} {
      ${!!hoverColor && wrapperModifiers.hoverColor(theme, hoverColor)}
    }
  `}
`

test

import { Coffee } from '@styled-icons/boxicons-solid'
it('deve testar o hover e o transform', () => {
    const { debug, container } = renderWithTheme(
      <Icons color="primary" size="5rem" hoverColor="secondary">
        <Coffee title="Coffee" />
      </Icons>,
    )
    expect(screen.getByRole('img', { name: /coffee/i })).toHaveStyleRule(
      'color',
      '#0487cc',
      {
        modifier: ':hover',
      },
    )
  })

error

 No style rules found on passed Component using options:
    {"modifier":":hover"}
ts-jest react-testing-library
1 Answers

In my opinion, the error that you are getting is that you haven't properly selected the element which is having a hover color. Because of that reason, jest-styled-component is not able to find the element with a hover modifier.

 & :hover {
      color: ${theme.colors[hoverColor]};
 }

You added a space between & and : which is not right. The hover will not be applied to the selected element.

Solution: Remove the space between them.

&:hover {
   color: ${theme.colors[hoverColor]};
}
user_138476900
Related