jest-dom: toHaveStyle Color not working as expected

after struggling a lot with the toHaveStyle method, I resolved my tests converting the HEX to RGB with this function below:

export const convertHexToRGBA = (hexCode: string) => {
  let hex = hexCode.replace('#', '');

  if (hex.length === 3) {
    hex = `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;
  }

  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);

  return { r, g, b };
};

your tests will look like this:

expect(screen.getByText("Calories")).toHaveStyle({ color: convertHexToRGBA('#FFF') });

I had the same problem, and for me it works to put it inside an object

expect(screen.getByText("Calories")).toHaveStyle({ color: '#FFF' });

This worked for me too. We didn’t upgrade any package. We just upgraded node version

I had the same problem, and for me it works to put it inside an object

expect(screen.getByText("Calories")).toHaveStyle({ color: '#FFF' });

I’m having issues getting the correct value for background-color for a React MUI SnackbarContent component. I’m using testing-library. I’ve confirmed that my element is the correct element and that the background color of the element is rgb(230, 243, 250) in the inspector.

Here is my test code:

test('Renders correct color', async () => {
		render(<Info {...story.args} />);
		const content = screen.getByRole('alert');
		expect(content).toHaveStyle(`background-color: #E6F3FA`);
});

Here is the error message:

SnackbarContent > Renders info
-----
Error: expect(element).toHaveStyle()

- Expected

- background-color: rgb(230, 243, 250);
+ background-color: rgb(50, 50, 50);

I’ve also attempted using the color converter mentioned above but this results in the test passing no matter what color I pass to the function.

expect(content).toHaveStyle({
			backgroundColor: convertHexToRGBA('#E6F3FA'),
});

Hey thanks @gnapse Yes I guess is somehow related with how MUI theming/styling is applied… I’ll try to do some research in the next days about it 😃