test: configure stylex with test mode and remove custom snapshot serializer

Author: GeekLuffy

internal/test-utils/src/setup.ts

@@ -56,55 +56,3 @@ if (typeof window.matchMedia === 'undefined') {
     }),
   });
 }
-
-import {expect} from 'vitest';
-
-let isNormalizing = false;
-
-if (typeof expect !== 'undefined' && expect.addSnapshotSerializer) {
-  expect.addSnapshotSerializer({
-    serialize(
-      val: Element,
-      config: object,
-      indentation: string,
-      depth: number,
-      refs: unknown[],
-      printer: (
-        val: Element,
-        config: object,
-        indentation: string,
-        depth: number,
-        refs: unknown[],
-      ) => string,
-    ) {
-      isNormalizing = true;
-      try {
-        const clone = val.cloneNode(true) as Element;
-        if (clone.setAttribute && clone.getAttribute) {
-          const styleSrc = clone.getAttribute('data-style-src');
-          if (styleSrc) {
-            clone.setAttribute('data-style-src', styleSrc.replace(/\\/g, '/'));
-          }
-          const elements = clone.querySelectorAll('[data-style-src]');
-          for (const el of elements) {
-            const src = el.getAttribute('data-style-src');
-            if (src) {
-              el.setAttribute('data-style-src', src.replace(/\\/g, '/'));
-            }
-          }
-        }
-        return printer(clone, config, indentation, depth, refs);
-      } finally {
-        isNormalizing = false;
-      }
-    },
-    test(val: unknown) {
-      return (
-        !isNormalizing &&
-        val != null &&
-        typeof val === 'object' &&
-        (val as Element).nodeType === 1
-      );
-    },
-  });
-}

packages/core/src/FormLayout/__snapshots__/FormLayout.test.tsx.snap

@@ -2,9 +2,8 @@
 
 exports[`FormLayout > matches snapshot for horizontal direction 1`] = `
 <div
-  class="astryx-form-layout horizontal FormLayout__styles.base xdt5ytf x18g69wz FormLayout__styles.horizontal xrvj5dj x1mt1orb xu6a5m6"
+  class="astryx-form-layout horizontal FormLayout__styles.base FormLayout__styles.horizontal"
   data-direction="horizontal"
-  data-style-src="@astryxdesign/core:src/FormLayout/FormLayout.tsx:40; @astryxdesign/core:src/FormLayout/FormLayout.tsx:45"
   data-testid="layout"
 >
   <input
@@ -18,9 +17,8 @@ exports[`FormLayout > matches snapshot for horizontal direction 1`] = `
 
 exports[`FormLayout > matches snapshot for horizontal-labels direction 1`] = `
 <div
-  class="astryx-form-layout horizontal-labels FormLayout__styles.base xdt5ytf FormLayout__styles.horizontalLabels xrvj5dj x1pmbctz xlaq8a2 x7a106z xedohl4 x1rpgqan x1a1jff"
+  class="astryx-form-layout horizontal-labels FormLayout__styles.base FormLayout__styles.horizontalLabels"
   data-direction="horizontal-labels"
-  data-style-src="@astryxdesign/core:src/FormLayout/FormLayout.tsx:40; @astryxdesign/core:src/FormLayout/FormLayout.tsx:50"
   data-testid="layout"
 >
   <label>
@@ -34,9 +32,8 @@ exports[`FormLayout > matches snapshot for horizontal-labels direction 1`] = `
 
 exports[`FormLayout > matches snapshot for vertical direction 1`] = `
 <div
-  class="astryx-form-layout vertical FormLayout__styles.base x78zum5 xdt5ytf x18g69wz"
+  class="astryx-form-layout vertical FormLayout__styles.base"
   data-direction="vertical"
-  data-style-src="@astryxdesign/core:src/FormLayout/FormLayout.tsx:40"
   data-testid="layout"
 >
   <input

vitest.config.ts

@@ -25,11 +25,14 @@ export default defineConfig({
             '@stylexjs/babel-plugin',
             {
               dev: true,
+              test: true,
               runtimeInjection: true,
               genConditionalClasses: true,
               treeshakeCompensation: true,
               aliases: {
-                '@astryxdesign/core/*': [path.join(rootDir, 'packages/core/src/*')],
+                '@astryxdesign/core/*': [
+                  path.join(rootDir, 'packages/core/src/*'),
+                ],
                 '@astryxdesign/core': [path.join(rootDir, 'packages/core/src')],
               },
               unstable_moduleResolution: {
@@ -47,7 +50,10 @@ export default defineConfig({
       // Map @astryxdesign/core subpath imports to source for lab package tests.
       // Must use regex to match subpaths like @astryxdesign/core/Dialog, @astryxdesign/core/theme/tokens.stylex
       // while not breaking core's own relative imports.
-      {find: /^@astryxdesign\/core\/(.*)$/, replacement: path.join(coreSrc, '$1')},
+      {
+        find: /^@astryxdesign\/core\/(.*)$/,
+        replacement: path.join(coreSrc, '$1'),
+      },
     ],
   },
   test: {