Styles from imported CSS classes not available with jsdom (react-testing-library)

[Stehsegler]

Describe the bug

CSS properties from imported classes are not available within tests, i.e. not contained in the return value of getComputedStyles() for the respective element. Among other things, this prevents jest-dom's toBeVisible() matcher from recognizing an element as hidden when display: none; is set in an imported class.

While I discovered this problem with React, it will probably be framework-independent. This SO question seems to indicate it is also an issue with Vue at least.

Reproduction

See this StackBlitz, which I created from the official vitest/react-testing-library example by adding a third test to App.test.tsx.

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.10 - /bin/yarn
    npm: 7.17.0 - /bin/npm
  npmPackages:
    @vitejs/plugin-react: ^1.3.2 => 1.3.2 
    vite: ^2.9.9 => 2.9.14 
    vitest: latest => 0.18.1

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[Stehsegler]

Wow, that was fast! Thanks a lot for taking care of the issue, and for developing and maintaining vitest in general.

[sheremet-va]

#1690 fixes this issue, but Vitest by default doesn't process CSS at all. You will need to enable it via test.css config option. We might want to change the default now, since it changes how your code works 🤔