test: workaround to handle .css.ts

Author: gndz07

jest.config.cjs

@@ -4,4 +4,8 @@ module.exports = {
   moduleDirectories: ['node_modules'],
   setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
   testPathIgnorePatterns: ['/node_modules/', '/__tests__/utils'],
+  transform: {
+    '\\.css\\.ts$': '<rootDir>/jest.cssTransform.cjs',
+    '\\.(js|jsx|tsx?)$': 'babel-jest',
+  },
 };

jest.cssStub.cjs

@@ -0,0 +1,17 @@
+// Mock for vanilla-extract .css.ts files
+// This stub returns a Proxy that returns the key name for any property access
+// This allows tests to run without processing vanilla-extract styles
+
+module.exports = new Proxy(
+  {},
+  {
+    get: (target, prop) => {
+      // Return the property name as the class name
+      // This makes debugging easier as you can see which class was used
+      if (typeof prop === 'string') {
+        return prop;
+      }
+      return target[prop];
+    },
+  }
+);

jest.cssTransform.cjs

@@ -0,0 +1,20 @@
+// Custom Jest transformer for vanilla-extract .css.ts files
+// This transformer prevents vanilla-extract from executing during tests
+// by returning a mock module that exports a Proxy
+
+module.exports = {
+  process() {
+    return {
+      code: `
+        module.exports = new Proxy({}, {
+          get: (target, prop) => {
+            if (typeof prop === 'string') {
+              return prop;
+            }
+            return target[prop];
+          }
+        });
+      `,
+    };
+  },
+};