classNameFormatter in setStyleSheetSerializerOptions works on Windows but not on AWS Linux (CI/CD)

[rohankveer]

When running snapshot tests with jest-styled-components, the classNameFormatter callback inside setStyleSheetSerializerOptions works fine locally on Windows.
However, in our CI/CD environment (running on AWS Linux), the callback never gets executed — no console output, no custom class names — which causes snapshot mismatches.
This makes snapshot testing inconsistent between local and CI environments.

Environment
Local (works fine)

• OS: Windows 11
• Node: 20.12.0
• Jest: 30.0.5
• jest-styled-components: 7.2.0

CI/CD (fails)

• OS: Amazon Linux 2 (AWS CodeBuild)
• Node: 20.12.0
• Jest: 30.0.5
• jest-styled-components: 7.2.0

Jest Config

// jest.config.js
const config = {
  transform: {
    '^.+\\.m?(t|j)sx?$': [
      '@swc/jest',
      {
        jsc: {
          parser: {
            syntax: 'typescript',
          },
        },
      },
    ],
  },
  moduleNameMapper: {
    '\\.(svg|css|png)$': 'identity-obj-proxy',
  },
  testEnvironmentOptions: {
    customExportConditions: ci && !coverage ? [] : ['dev'],
  },
  setupFilesAfterEnv: [
    '<rootDir>/tests/__setup__/axe.js',
    '<rootDir>/tests/__setup__/fail-on-console.js',
    '<rootDir>/tests/__setup__/setupResizeObserver.js',
    '<rootDir>/tests/__setup__/setupJestSnapshot.js',
  ],
  testPathIgnorePatterns: ['/node_modules/'],
  transformIgnorePatterns: ['/node_modules/(?!react-merge-refs)'],
  testEnvironment: 'jsdom',
  reporters: ci
    ? [['github-actions', { silent: false }], 'summary']
    : ['default'],
  coverageReporters: ['lcov', 'text', 'cobertura'],
  coverageThreshold: {
    global: {
      branches: 100,
      lines: 100,
    },
  },
};
export default config;

Snapshot Setup

// setupJestSnapshot.js
import 'jest-styled-components';
import { setStyleSheetSerializerOptions } from 'jest-styled-components/serializer';

console.log('Setting up Jest snapshot serializer for styled-components/emotion class names'); // works in CI + local

setStyleSheetSerializerOptions({
  classNameFormatter: (index) => {
    console.log(`Formatting class name for index: ${index}`); // works locally, NOT in CI (Linux)
    return `wxp${index}`;
  },
});

Observed Behavior

• Windows : Both console logs are printed, snapshots contain wxp${index} class names.
• AWS Linux (CI): First log is printed, second log (inside classNameFormatter) is never called, snapshots use default class names.

[quantizor]

v7.3.0 has been released with various fixes. Could you test with the latest version? Also, the difference in customExportConditions between your local and CI environments (['dev'] vs []) could cause styled-components to load different bundles, which would affect how the serializer hooks into the stylesheet.

[quantizor]

v7.3.0 has been released with various fixes. Could you test with the latest version and report back?

Looking at the details—the difference in customExportConditions between your local environment (['dev']) and CI ([] or unset) could cause styled-components to resolve different module entry points. This would mean the serializer hooks into a different internal stylesheet instance than the one your components use, causing classNameFormatter to appear to not work.

Try ensuring customExportConditions is consistent between local and CI jest configs.

[quantizor]

Hi @rohankveer, just circling back. v7.4.0 is out now with several stylesheet handling fixes since 7.2.0. If you've had a chance to retest, I'd love to know whether the issue persists, and whether aligning customExportConditions between local and CI made any difference. Happy to dig in further if you can share a minimal repro.