Usage with ts-jest

[jdanil]

Hey there 👋

I've got vanilla-extract setup with the webpack plugin (without babel).

I'm trying to get my jest tests running without using babel-jest. I still need to use ts-jest for the reasons outlined here.

jest throws the following error.

 ● Test suite failed to run

    Styles were unable to be assigned to a file. This is generally caused by one of the following:

    - You may have created styles outside of a '.css.ts' context
    - You may have incorrect configuration. See https://vanilla-extract.style/documentation/setup

      1 | import { style } from '@vanilla-extract/css';
      2 |
    > 3 | export const button = style({

I've tried using @vanilla-extract/css/disableRuntimeStyles, but it seems to have no effect with ts-jest.

I've also tried to use a style mock with the following config.

jest.config.json

{
  "moduleNameMapper": {
    "\\.css$": "<rootDir>/style-mock.ts"
  },
}

style-mock.ts

module.exports = {};

But that throws the following error.

 ● Test suite failed to run

    SyntaxError: The requested module './App.css' does not provide an export named 'themeClass'

It can be worked around by mocking each export referenced from .css.ts files.

module.exports = {
  themeClass: jest.fn(),
};

But that's probably not feasible as every new export exposed from .css.ts files would need to be mocked.

Is there another way to get vanilla-extract working with ts-jest? Even if all the styles are simply ignored.

Here is a repro if its useful.

[mattcompiles]

I've never used ts-jest so not sure what's possible. However, if you can set custom transforms like in jest then you could pass the .css.ts through the babel-plugin via that.

[jdanil]

Nice one. Thanks @mattcompiles.

If anyone is looking this up later, this is all it took to get babel to parse the .css.ts files in the jest config.

{
  "transform": {
    "^.+\\.css\\.ts$": "babel-jest"
  }
}

And of course the babel config changes already outlined in the documentation.