How to test styles of component?

[jovial pond]

I'm trying to test if a button's background color changes when clicked.
I have this code snippet:

const btn = screen.getByTestId("btn");
fireEvent.click(btn);

const btnStyles = getComputedStyle(btn);
expect(btnStyles.backgroundColor).toBe(mainColor);

Result:

Expected: "#000"
Received: "ButtonFace"

[spark saffron]

Try running screen.debug(btn) to check the markup

[jovial pond]

how can I access --button-bg: var(--mantine-color-main-filled); ? btnStyles: CSSStyleDeclaration only allows number when accessing using []

[spark saffron]

btnStyles.getPropertyValue('--button-bg')