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}
/>