StyleX, Vite and Jest - babel seems to not compile

[hogansghost]

I seem to be struggling to get jest to run with styleX and vite (although I assume the vite aspect is null and void as I'm running the tests directly currently).

● Test suite failed to run

'stylex.create' should never be called at runtime. It should be compiled away by '@stylexjs/babel-plugin'

I have created a basic application that renders two paragraphs of static text and this is building as I expect it to when running locally. I've setup vite with the vite-plugin-stylex library and this seems to be working as expected, I see both paragraphs and the text colour changes as I expect (based on the simple styles I've provided).

I've created a jest.config and used ts-jest to point to a .babelrc.cjs file:

jest.config

import type { JestConfigWithTsJest } from 'ts-jest';

const config: JestConfigWithTsJest = {
  clearMocks: true,
  resetMocks: true,
  restoreMocks: true,
  resetModules: true,
  testEnvironment: 'jest-environment-jsdom',
  moduleDirectories: ['node_modules', 'src'],
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  transform: {
    '^.+\\.[t|j]sx?$': [
      'ts-jest',
      {
        babelConfig: './.babelrc.cjs',
      },
    ],
  },
};

export default config;

.babelrc.cjs

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-typescript',
    [
      '@babel/preset-react',
      {
        runtime: 'automatic',
      },
    ],
  ],
  plugins: [
    '@babel/plugin-transform-runtime',
    [
      '@stylexjs/babel-plugin',
      {
        dev: true,
        test: true,
        runtimeInjection: false,
        genConditionalClasses: true,
        treeshakeCompensation: true,
        unstable_moduleResolution: {
          type: 'commonJS',
          rootDir: __dirname,
        },
      },
    ],
  ],
};

But I seem unable to get jest to compile the runtime code away. I'm sure that I'm missing something obvious here but I've been trying different setups and reading over the other jest discussions in the repo here, the few other stack overflow discussions I can find and so far I'm coming up blank. Any help would be greatly appreciated!

Misc notes

I currently have the styles in a separate file (it's a convention I need to follow in the project this will possibly go into) and I can see that some kind of transform IS occurring as it is "moving" the styles definition into the component file in the jest output:

################ SOURCE FILE ################
import * as stylex from '@stylexjs/stylex';
import { styles } from './StyleX.styles';

export const StyleX = () => (


################ JEST OUTPUT ################
1 | import * as stylex from '@stylexjs/stylex';
      2 |
    > 3 | export const styles = stylex.create({
        |                              ^
      4 |   paragraph: {
      5 |     color: '#ff0000',
      6 |     fontSize: '16px',

[hogansghost]

Hmm, it seems that this is entirely down to ts-jest. I created a blank project to investigate further and I seem to have solved it overall finally by replacing ts-jest with just babel-jest (leaving the rest of the config more or less identical).

[nmn]

StyleX is a Babel plugin that won't be used by ts-jest.