fix(jest-serializer): fix space handling (#583)

change/@griffel-jest-serializer-4d8d3102-ee2f-4b0f-bd12-6447c2e066ea.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: improve trailing space handling",
+  "packageName": "@griffel/jest-serializer",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/jest-serializer/src/index.test.tsx

@@ -37,16 +37,20 @@ const TestComponent: React.FC<{ id?: string }> = ({ id }) => {
     'class-b',
   );
 
-  return <div data-testid={id} className={styles} />;
+  return <div data-testid={id} className={styles} data-test-attr="true" />;
 };
 
-const TestResetComponent: React.FC<{ id?: string }> = ({ id }) => {
+const TestResetComponent: React.FC<{ id?: string; children?: React.ReactNode }> = ({ id, children }) => {
   const classes = useStyles1();
   const baseClassName = useBaseStyles();
 
-  const className = mergeClasses('class-a', baseClassName, classes.paddingLeft, 'class-b');
+  const className = mergeClasses('class-reset-a', baseClassName, classes.paddingLeft, 'class-reset-b');
 
-  return <div data-testid={id} className={className} />;
+  return (
+    <div data-testid={id} className={className}>
+      {children}
+    </div>
+  );
 };
 
 const RtlWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
@@ -85,22 +89,24 @@ describe('serializer', () => {
     expect(render(<TestComponent />).container.firstChild).toMatchInlineSnapshot(`
       <div
         class="class-a class-b"
+        data-test-attr="true"
       />
     `);
     expect(render(<TestResetComponent />).container.firstChild).toMatchInlineSnapshot(`
       <div
-        class="class-a class-b"
+        class="class-reset-a class-reset-b"
       />
     `);
 
     expect(render(<TestComponent />, { wrapper: RtlWrapper }).container.firstChild).toMatchInlineSnapshot(`
       <div
         class="class-a class-b"
+        data-test-attr="true"
       />
     `);
     expect(render(<TestResetComponent />, { wrapper: RtlWrapper }).container.firstChild).toMatchInlineSnapshot(`
       <div
-        class="class-a class-b"
+        class="class-reset-a class-reset-b"
       />
     `);
 
@@ -113,10 +119,49 @@ describe('serializer', () => {
 
   it('handles HTML strings', () => {
     expect(render(<TestResetComponent />).container.innerHTML).toMatchInlineSnapshot(
-      `"<div class="class-a class-b"></div>"`,
+      `"<div class="class-reset-a class-reset-b"></div>"`,
     );
     expect(render(<TestComponent />).container.innerHTML).toMatchInlineSnapshot(
-      `"<div class="class-a class-b"></div>"`,
+      `"<div class="class-a class-b" data-test-attr="true"></div>"`,
+    );
+  });
+
+  it('handles nested elements', () => {
+    expect(
+      render(
+        <TestResetComponent>
+          <TestComponent />
+        </TestResetComponent>,
+      ).container.firstChild,
+    ).toMatchInlineSnapshot(`
+      <div
+        class="class-reset-a class-reset-b"
+      >
+        <div
+          class="class-a class-b"
+          data-test-attr="true"
+        />
+      </div>
+    `);
+
+    expect(
+      render(
+        <TestResetComponent>
+          <TestComponent />
+        </TestResetComponent>,
+      ).container.innerHTML,
+    ).toMatchInlineSnapshot(
+      `"<div class="class-reset-a class-reset-b"><div class="class-a class-b" data-test-attr="true"></div></div>"`,
     );
   });
+
+  it('does not assert on non-sequence strings', () => {
+    expect({
+      toString: () => 'class="foo"',
+    }).toMatchInlineSnapshot(`
+      Object {
+        "toString": [Function],
+      }
+    `);
+  });
 });

packages/jest-serializer/src/index.ts

@@ -1,5 +1,5 @@
 import type { CSSClasses } from '@griffel/core';
-import { DEBUG_RESET_CLASSES, DEFINITION_LOOKUP_TABLE } from '@griffel/core';
+import { DEBUG_RESET_CLASSES, DEFINITION_LOOKUP_TABLE, SEQUENCE_PREFIX } from '@griffel/core';
 
 export function print(val: unknown) {
   /**
@@ -56,15 +56,29 @@ export function print(val: unknown) {
   /**
    * Trim whitespace from className
    */
-  return `"${valStrippedClassNames.replace(/(?:class|className)="(.*)"/, (match, p1) =>
+  return `"${valStrippedClassNames.replace(/(?:class|className)="([^"]+)"/g, (match, p1) =>
     match.replace(p1, p1.trim()),
   )}"`;
 }
 
+function isRegisteredSequence(value: string) {
+  // Heads up!
+  // There will be a lot of strings that will be tested here, assert only if it's a sequence-like string
+  if (value.indexOf(SEQUENCE_PREFIX) === 0) {
+    return (
+      Object.prototype.hasOwnProperty.call(DEFINITION_LOOKUP_TABLE, value) ||
+      Object.prototype.hasOwnProperty.call(DEBUG_RESET_CLASSES, value)
+    );
+  }
+
+  return false;
+}
+
 export function test(val: unknown) {
   if (typeof val === 'string') {
-    return val.split(' ').some(v => DEBUG_RESET_CLASSES[v] || DEFINITION_LOOKUP_TABLE[v]);
+    return val.split(' ').some(v => isRegisteredSequence(v));
   }
+
   return false;
 }