Usage with Jest & Vite

[ChristopherMeek]

Hi there,

Started using Stylex in a basic vite project (no SSR etc) using the unofficial stylex vite plugin and everything has been going swimmingly but my tests complain that "stylex.defineVars should never be called. It should be compiled away.", I presume I need to bootstrap the Stylex compiler somewhere in the testing but have no idea where to start. My Jest config looks like ...

"jest": {
    "preset": "ts-jest/presets/js-with-ts",
    "setupFilesAfterEnv": [
      "./src/setupTests.js"
    ],
    "testEnvironment": "jest-environment-jsdom",
    "transformIgnorePatterns": [
      "/node_modules/(?!uuid/.*)"
    ],
    "moduleNameMapper": {
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
    },
    "modulePaths": [
      "./src"
    ]
  }

TIA

[nmn]

You need a .babelrc file for Jest to compile StyleX. You should use the following values for the test environment.

• dev: true
• test: true
• runtimeInjection: false

NOTE: make sure you only use these options for the test environment and not for your normal development and production builds.

[ChristopherMeek]

Thankyou, it ended up being easier to move to vitest in the end and have everything going through the same config, rather than having sperate configs for test and build

[romanchekashov]

@nmn Can you provide an example how to run jest tests with stylexjs in Nextjs 14?
I cannot find where to put values: dev: true / test: true / runtimeInjection: false.
I keep getting stylex.defineVars should never be called. It should be compiled away and no idea how to fix this;(

[nmn]

I cannot find where to put values: dev: true / test: true / runtimeInjection: false

This is for the StyleX Babel configuration.

[romanchekashov]

@nmn Doesn't work( Maybe you can add jest test to your example with Nextjs14?

[nmn]

I've added an example here as I didn't want to pollute the repo with extra tests:

https://github.com/nmn/nextjs-app-dir-stylex