Support Vitest, Jest, etc style tests

[oliviertassinari]

Summary

When testing components and their a11y compliance, it's frequently to rely on getComputedStyle(element) to check whether the element is in the a11y tree or not (jsdom has some support for this too, e.g. jsdom/jsdom#2866). Examples of reliance on this:

• Testing library byRole: https://testing-library.com/docs/queries/byrole/#hidden
• Chai https://www.chaijs.com/plugins/chai-dom/#visible
• Jest https://github.com/testing-library/jest-dom?tab=readme-ov-file#tobevisible

From there, I believe it's not really possible to use Pigment CSS in production without test engine coverage, hence I'm opening this issue.

Potentially, it's where #59 could maybe step in as a solution.

Examples

• Vanilla extract https://vanilla-extract.style/documentation/test-environments/
• Linaria
  • https://github.com/thymikee/linaria-jest
  • Linaria Vite callstack/linaria#1299
• StyleX Usage with Jest & Vite facebook/stylex#182
• Panda CSS. No issue since relies on code generation?

Motivation

This is part of the story of making Pigment CSS the default engine in Material UI. This seems to be a required step.

This was raised during a discussion at React Advanced 2024.

Search keywords: -