How we solved the Jest style mocking problem

[bjgrosse]

Just sharing here in case anyone else is having trouble with it.

https://bjgrosse.github.io/techblog/2023/01/04/vanilla-extract-and-jest-style-mocks.html

We are integrating Vanilla-extract CSS in a React project which uses Jest for our tests. Like many Jest configurations, we have this line in ourjest.config.ts moduleNameMapper section:

'\.(css|less|scss)$': '/src/Mocks/styleMock.js'

Without this, we get Jest transform errors when it tries to process imports of css files. However, this causes a problem with Vanilla Extract, as this mechanism can’t distinguish between plain css imports and our vanilla extract css.ts file imports. The result is that our vanilla extract css.ts files get mocked and our code breaks where vanilla extract styles are imported from those files.

The VE documentation recommends removing the style mock completely, or trying moving all your plain CSS files into a folder so you can update the pattern to match only those and ignore the css.ts files. This solution isn’t feasible for us because we import some css files from packages and those CSS files can’t be moved to a special folder.

[jd-oconnor]

@bjgrosse you just saved me. I've been trying to figure this out for the past few hours and this worked perfectly. Thank you!!

[jazanne]

THANK YOU

[gileto]

Thank you so much <3