@stylexswc/jest
v0.18.0
Published
Jest transformer for StyleX that compiles CSS-in-JS with the Rust NAPI-RS/SWC compiler, enabling Babel-free StyleX component tests.
Maintainers
Readme
@stylexswc/jest
Jest transformer that compiles StyleX with a Rust compiler (NAPI-RS + SWC). Part of the StyleX SWC Plugin workspace.
Components that use StyleX cannot run in Jest without a
transform: stylex.create calls must be compiled before the test executes. This
transformer does that compilation with
@stylexswc/rs-compiler,
a Rust implementation of the StyleX transform, so tests see the same compiled
class names your production build produces — without pulling Babel into your
test pipeline.
This is a community project and is not affiliated with Meta. It tracks the official StyleX releases
and requires Node.js 20 or newer.
Installation
npm install --save-dev @stylexswc/jestConfiguration
Add the transformer to your Jest configuration:
// jest.config.js
const path = require('path');
module.exports = {
transform: {
'^.+\\.(ts|tsx|js|jsx|mjs|cjs|html)$': [
'@stylexswc/jest',
{
rsOptions: {
aliases: {
'@/*': [path.join(__dirname, '*')],
},
unstable_moduleResolution: {
type: 'commonJS',
},
},
},
],
},
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
testEnvironment: 'jsdom',
};Options
rsOptions
- Type:
Partial<StyleXOptions> - Optional
- Description: StyleX compiler options passed to the transformer. For the standard options, see the official StyleX documentation.
[!NOTE] The
includeandexcludeoptions are exclusive to the Rust compiler and are not available in the official StyleX Babel plugin.
rsOptions.include
- Type:
(string | RegExp)[] - Optional
- Description: Glob patterns or regular expressions selecting the files to transform. When specified, only files matching at least one pattern are transformed. Patterns are matched against paths relative to the current working directory. Regular expressions support lookahead and lookbehind.
rsOptions.exclude
- Type:
(string | RegExp)[] - Optional
- Description: Glob patterns or regular expressions excluding files from the
transform. A file matching any exclude pattern is skipped even if it matches
an
includepattern. Patterns are matched against paths relative to the current working directory. Regular expressions support lookahead and lookbehind.
Path Filtering Examples
Include only specific directories:
{
rsOptions: {
include: ['src/**/*.{ts,tsx}', 'app/**/*.{ts,tsx}'],
},
}Exclude test files:
{
rsOptions: {
exclude: ['**/*.test.*', '**/*.spec.*', '**/__tests__/**'],
},
}Exclude node_modules except specific packages (negative lookahead):
{
rsOptions: {
exclude: [/node_modules(?!\/@stylexjs\/open-props)/],
},
}Chaining with other transformers
This transformer only compiles StyleX — TypeScript and JSX still need their own
transform. Chain it with @swc/jest (or another transformer) using
jest-chain-transform:
// jest.config.js
const path = require('path');
module.exports = {
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
testEnvironment: 'jsdom',
transform: {
'^.+\\.(ts|tsx|js|jsx|mjs|cjs|html)$': [
'jest-chain-transform',
{
transformers: [
[
'@stylexswc/jest',
{
rsOptions: {
aliases: {
'@/*': [path.join(__dirname, '*')],
},
unstable_moduleResolution: {
type: 'commonJS',
},
},
},
],
[
'@swc/jest',
{
jsc: {
parser: {
syntax: 'typescript',
tsx: true,
},
transform: {
react: {
runtime: 'automatic',
},
},
target: 'esnext',
},
module: {
type: 'es6',
},
},
],
],
},
],
},
};A complete working configuration lives in the Next.js example app.
FAQ
Why do my tests fail with "stylex.create should never be called"?
That error means the StyleX code reached the runtime uncompiled. Check that this
transformer is registered for the failing file's extension and that the file is
not excluded by your rsOptions.include/exclude patterns.
Do I still need babel-jest or @stylexjs/babel-plugin?
No. This transformer replaces the Babel-based StyleX setup in Jest. For
TypeScript/JSX, chain it with @swc/jest as shown above instead of Babel.
My theme tokens from .stylex.ts files don't resolve in tests
Set unstable_moduleResolution (usually { type: 'commonJS' }) and mirror your
path aliases in rsOptions.aliases, exactly as in your build config.
Is this an official StyleX package?
No. It is a community-maintained alternative to the official tooling and is not affiliated with or supported by Meta.
Documentation
License
MIT — see LICENSE
