How to get and test an element style using RTL?

I have a sidebar menu component, which has a small tab to be pressed in order to show/hide the menu.
The tab, as the entire menu, can be rendered on the left or the right side of the screen based on 'position' property.

Code below:

const SideBar = ({ 
    position = 'left', 
    label = undefined, 
    isMenu = true,
    isOpen = true,
    width = 270,
    content,
}) => { 
// ... rest of the Component code

The 'drawerBleeding' is defined like this:

   const drawerBleeding = 22;

Tab code inside component:

<StyledBox
    id='tabSideBar'
    component='button'
    sx={{
        position: 'absolute',
        ...(position === 'left' && {
            right: -drawerBleeding,
            borderTopRightRadius: 16,
            borderBottomRightRadius: 16,
            boxShadow: '4px 4px 5px 0px rgba(0,0,0,0.14)',
        }),
        ...(position === 'right' && {
            left: -drawerBleeding,
            borderTopLeftRadius: 16,
            borderBottomLeftRadius: 16,
            boxShadow: '-4px 4px 5px 0px rgba(0,0,0,0.14)',
        }),
        visibility: 'visible',
        top: '80px',
        width: drawerBleeding,
        height: '90px',
        alignContent: 'center',
        "&:hover": {
            cursor: "pointer",
            color: "#000000",
        },
    }}
    onClick={open === true ? toggleDrawer(false) : toggleDrawer(true)}
>
    {label === undefined
        ? <Puller />
        : <Typography 
            sx={{
                writingMode: 'vertical-lr',
                fontSize: 'smaller',
                fontWeight: 500,
                color: colors.grey[100],
            }}>{label}</Typography>
    }
</StyledBox>

I'm creating a test script using jest and RTL.

One of the test cases is to test if the tab/menu is on the left, and another one if it is on the right. In order to test that I'm looking at the CSS styles 'right' and 'left' but I don't want to specify the value of the right of left style, because we might need to change the tab size and then the test will fail.

Here is my current test:

test('renders on the left side of the screen by default', async () => {
    const getById = queryByAttribute.bind(null, 'id')
  
    const dom = render(<SideBar content={<div>Sample Content</div>} />);
    
    // Wait for the styles to be applied
    await waitFor(() => {

      const sideBarElement = getById(dom.container, 'tabSideBar')
      expect(sideBarElement).toHaveStyle('right: -22px'); // Adjusted for drawerBleeding  
    });
  });

At this specific test I would like to check if the style 'right' exists regarding the value of the drawerBleeding value.

If I could get a string with the "right: -22px" I might be able to check if the string includes 'right' and that would solve my issue.

If there is a better way to do this, please share.

Thank you.

I haven't tried running your code but i have tried checking something similar. Give this a try. let me know if it helps.

let style = window.getComputedStyle(sideBarElement);
expect(style.right).toMatch(/22px/);

Also like i suggested in comment using class instead of inline style and checking for the class could also be a viable option and will make you code more readable. Hope this helps!