Style Testing with Tokens React testing library and Jest

[Cam-Bloom]

Problem

Currently implementing tests within a react project using FluentUI , some of our components are not fluent but style using the tokens system for colours etc. I need to test the presence of a colour in a test, using RTL and JestDOM. The style has to be applied via inline style rather than class.

When it comes to testing the toHaveStyle matcher is used as follows inline with FluentUI own tests on repo expect(Text).toHaveStyle('color: var(--colorNeutralForeground3BrandHover)'); testing for using CSS variables. This test passes but is a false positive as expect(Text).toHaveStyle('color: var(--NotARealColour)'); also passes, I believe this to be as CSS variable is not being applied properly, therefore the applied style of 'color' is undefined and so is the CSS variable causing it to pass. If you use a normal rgb or hex code colour to the style it picks it up fine, so looks like a problem with how FluentUI applies the CSS variables in test environment.

Cloning the FluentUI and running their tests locally the same issue is not present in CSS variables but it is not clear what the difference is. Not sure if a helper function is needed but cannot find anything that stands out within the FluentUI repo, any help is appreciated.

Setup Minimum Reproducible

App.test.ts

test("Check color style of text", async () => {
  render(
    <FluentProvider theme={webLightTheme}>
      <App />
    </FluentProvider>
  );

  const toggleButton = screen.getByRole("button", { name: /toggle/i });

  await userEvent.click(toggleButton);

  const Text = screen.getByText(/text/i);
  console.log(getComputedStyle(Text));
  expect(Text).toHaveStyle(`color: var(--colorNeutralForeground3BrandHover)`);
});

App.ts

function App() {
  const [isBlue, setIsBlue] = React.useState(false);
  return (
    <div>
      <p
        style={{
          color: isBlue
            ? tokens.colorNeutralForeground3BrandHover
            : tokens.colorPaletteRedForeground1,
        }}
      >
        Text
      </p>
      <Button onClick={() => setIsBlue(!isBlue)}>Toggle</Button>
    </div>
  );
}

[spmonahan]

While I cannot speak to the difference in configuration here I will ask: you mention setting the style inline so you can test it. Why not set a class name based on isBlue and test the existence of the class instead? Do you really need to test the style value being set?

Testing the style value is potentially brittle as the actual value can change with the theme while I'd expect CSS classes to remain constant regardless of theme.