Is there a way to select pseudo classes from `toHaveStyle`?

61 Views Asked by At

Is there a way with toHaveStyle() to test the pseudo-class styling for a component (e.g. :before, :after) since in my case the changes for a given prop are only visible in them?

I haven't seen a way to even get to that pseudo-class styling.

const isVerticalOrientation = orientation === 'vertical';
const isVerticalHairline = isVerticalOrientation && dividerVariant.isHairline;
const isVerticalDashed = isVerticalOrientation && dividerVariant.isDashed;
const isVerticalDotted = isVerticalOrientation && dividerVariant.isDotted;

<Box
  sx={{
    position: 'relative',
    width: '100%',
    display: 'flex',
    alignItems: 'center',
    // vertical hairline
    ...(isVerticalHairline && {
      width: '0px',
    }),
    // vertical dashed and dotted
    ...((isVerticalDashed || isVerticalDotted) && {
      width: '1px',
    }),
    '&::before': {
      content: '""',
    },
    '&::before, &::after': {
      width: '100%',
      height: '0px',
      borderTopStyle: 'solid',
      borderTopColor: 'grey',
      // vertical hairline
      ...(isVerticalHairline && {
        width: '0px',
        height: '100%',
        borderTopWidth: '0',
        borderLeftStyle: 'solid',
        borderLeftWidth: '1px',
        borderLeftColor: 'red',
      }),
    },
  }}
  {...rest}
/>
0

There are 0 best solutions below