Run Plugins for SWC when running Jest

[kennetpostigo]

Describe the feature you'd like to request

Hi 👋

I'm using vanilla-extract a typescript based css pre-processor with next and it works great when running and developing my application. However, when trying to run jest on my UI tests it chokes on vanilla-extract and throws errors because I believe it doesn't know where the generated CSS is. In my next.config.js I use the vanilla-extract plugin and next works flawlessly with this.

Describe the solution you'd like

I would like jest to be able to work successfully with vanilla-extract. I believe at the moment it is failing because it might not be using the vanilla-extract plugin so it fails when running tests. Is it possible to make jest aware of the plugin? If so I think that may be the best solution.

Describe alternatives you've considered

The main alternative that i've considered is enabling the use of babel/webpack with only jest when running tests, but i'm not exactly sure how that would look like or if there is prior art in next land for this. My understanding is that it's all swc or all babel + webpack but not both, and that makes sense in general.

In the worst case we'd have to opt out of using SWC unfortunately 😞

[balazsorban44]

It looks like vanilla-extract relies on Babel in test environments at the moment: https://vanilla-extract.style/documentation/setup/#test-environments

[kennetpostigo]

@balazsorban44 is there a way to only use babel for the test environment and keep using swc for web app development?

[balazsorban44]

For now, you could create a small script that toggles a .babelrc file depending on the environment.

[Palmaswell]

Hi there, @balazsorban44; we are currently struggling with the same issue. Can you please elaborate a bit more on what you mean to toggle the .babelrc?

[kwonoj]

Interested in trying out https://npmjs.com/package/swc-plugin-vanilla-extract? I could spare some time to port https://npmjs.com/package/@vanilla-extract/babel-plugin for the SWC. For next.js, you may need to wait #40520 to land though.