@media doesn't seem to compile with css / scss modules + more

[dannyvassallo]

The Problem

I'm using jest-preview to visualize screens using css modules. Some of the styling is dependent on media queries. None of the @media statements seem to get compiled into the embedded style tags. Other classes from the module make it in fine.

I also cannot import SCSS files into the setup file. If I compile them using gulp or webpack and then import the resulting .css file, it appears to work fine.

Additional issue but not related, I can't get auto preview to work at all.

What I've tried

So far I've tried compiling the SCSS myself and removing hashes from the class names. I've faced trouble using the advanced configuration to try and remove the hashes from the jest-preview transform source. This didn't seem to work either.

I've also tried using a custom transform with some additional postCss utilities but haven't had any success. If I render components with no media queries, this tool is absolutely wonderful.

What is the framework/ technology you want to integrate Jest Preview to?

"react": "^16.13.1"
"jest": "^26.6.3"
"postcss": "^8.4.6"
"sass": "^1.53.0"
"sass-loader": "^10.2.1"

Thank you

Thank you for your time and continued effort on this tool! If I can contribute, I'd love to if someone can point me in the right direction.

[nvh95]

@dannyvassallo Thank you for your kind words and your report on this issue. TBH, I am kind of busy for a couple of weeks ahead, I will try to look into your issue in more detail, maybe at the beginning of September. In the meantime, can do me a favor by creating a reproduction using one of those? It would help me to support you better.

• Create a new GitHub repository (recommended): https://github.com/new
• Create a StackBlitz project: https://stackblitz.com
• Create a sandbox on CodeSandbox: https://codesandbox.io/s

Additional issue but not related, I can't get auto preview to work at all.

If it's a different issue, can you please do me a favor by creating another issue with a minimal reproduction? Thanks.

If I can contribute, I'd love to if someone can point me in the right direction.

It's super great. Thank you for offering your help. I can absolutely guide you, but please give me a couple of weeks. For now, I can suggest you some useful resources to get more familiar with Jest Preview

1. Official docs, can go through all of it after 10-15 minutes: https://www.jest-preview.com
2. Contributing guide: https://github.com/nvh95/jest-preview/blob/main/CONTRIBUTING.md
3. Briefly how `jest-preview works: https://github.com/nvh95/jest-preview/blob/main/HOW_JEST_PREVIEW_WORKS.md
4. The source code. jest-preview source code is easy to understand. The main logic resides in those 3 files

• https://github.com/nvh95/jest-preview/blob/main/src/preview.ts
• https://github.com/nvh95/jest-preview/blob/main/src/transform.ts
• https://github.com/nvh95/jest-preview/blob/main/cli/server/previewServer.js

I hope jest-preview can help you in your daily job. Please help to prepare a reproduction for your example. It would help me a lot to support your use case. Thanks.

[nvh95]

None of the @media statements seem to get compiled into the embedded style tags

Can you provide minimum reproduction. I added a commit to include @media query and it works fine. Please refer to this commit:
0e8a827#diff-650149a55a5b9fea04fefedba299bd2bf341e1a1c8b4d6e63e483e95669efbfcR4-R9

I also cannot import SCSS files into the setup file.

Please help to prepare a reproduction. In our demo, we can import CSS modules file (

jest-preview/demo/setupTests.js

Line 4 in 41019e6

import './assets/_scss/global-style.scss';

). Thanks.

[dannyvassallo]

It looks like you are correct! I do think I might have an idea of what's happening. I think the class name property on the component changes based on the media or screen size and it doesnt seem to be updating properly. Regardless of the window or screen size I stub in jest, it falls back to either default or the mobile values. Maybe it's something with the way I'm handling my renders?