Repository: microsoft/griffel
Pull request #264 (2022-10-27 09:05:50)

fix(jest-serializer): handles whitespaces better
#260 added support for classes generated by `makeResetStyles`, the problem is that whitespaces were still present in output:

![image](https://user-images.githubusercontent.com/14183168/198242444-70d4baae-d52b-412a-947e-11ce5381126b.png)

This PR fixes it.


github-actions[bot]: ## 📊 Bundle size report

<sub>🤖 This report was generated against <a href='https://github.com/microsoft/griffel/commit/61f2f0dbd26713e4c654f2e4726cd59571f0b8d7'>61f2f0dbd26713e4c654f2e4726cd59571f0b8d7</a></sub>

<!-- Sticky Pull Request Comment -->

Patch:
diff --git a/change/@griffel-jest-serializer-75c22504-bc4b-439e-8717-b91254c209e1.json b/change/@griffel-jest-serializer-75c22504-bc4b-439e-8717-b91254c209e1.json
new file mode 100644
index 0000000..fa72cc0
--- /dev/null
+++ b/change/@griffel-jest-serializer-75c22504-bc4b-439e-8717-b91254c209e1.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(jest-serializer): handles whitespaces better",
+  "packageName": "@griffel/jest-serializer",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/jest-serializer/src/index.ts b/packages/jest-serializer/src/index.ts
index adf0f0b..5df4d54 100644
--- a/packages/jest-serializer/src/index.ts
+++ b/packages/jest-serializer/src/index.ts
@@ -42,12 +42,12 @@ export function print(val: unknown) {
    * @example
    * regex = /f16th3vw|frdkuqy0|fat0sn40|fjseox00/
    */
-  const valStrippedClassNames = _val.replace(new RegExp(regexParts.join('|'), 'g'), '').trim();
+  const valStrippedClassNames = _val.replace(new RegExp(regexParts.map(p => `${p}\\s?`).join('|'), 'g'), '').trim();
 
   /**
    * Trim whitespace from className
    */
-  return `"${valStrippedClassNames.replace(/className="\s*(\w*)\s*"/, 'className="$1"')}"`;
+  return `"${valStrippedClassNames.replace(/(class|className)="([^"]*)\s+"/, '$1="$2"')}"`;
 }
 
 export function test(val: unknown) {


Test patch:
diff --git a/packages/jest-serializer/src/index.test.tsx b/packages/jest-serializer/src/index.test.tsx
index 4d0d0ec..38ad22a 100644
--- a/packages/jest-serializer/src/index.test.tsx
+++ b/packages/jest-serializer/src/index.test.tsx
@@ -28,7 +28,14 @@ const TestComponent: React.FC<{ id?: string }> = ({ id }) => {
   const styles1 = useStyles1();
   const styles2 = useStyles2();
   const styles3 = useStyles3();
-  const styles = mergeClasses('static-class', styles1.root, styles1.paddingLeft, styles2.paddingRight, styles3.display);
+  const styles = mergeClasses(
+    'class-a',
+    styles1.root,
+    styles1.paddingLeft,
+    styles2.paddingRight,
+    styles3.display,
+    'class-b',
+  );
 
   return <div data-testid={id} className={styles} />;
 };
@@ -37,7 +44,7 @@ const TestResetComponent: React.FC<{ id?: string }> = ({ id }) => {
   const classes = useStyles1();
   const baseClassName = useBaseStyles();
 
-  const className = mergeClasses('static-class', classes.paddingLeft, baseClassName);
+  const className = mergeClasses('class-a', classes.paddingLeft, baseClassName, 'class-b');
 
   return <div data-testid={id} className={className} />;
 };
@@ -71,27 +78,37 @@ describe('serializer', () => {
     });
   });
 
-  it('renders without generated classes', () => {
+  // Note: When HTML element is passed we will get a string with classes, not the whole snippet
+  it('handles classes strings', () => {
     expect(render(<TestComponent />).container.firstChild).toMatchInlineSnapshot(`
       <div
-        class="static-class"
+        class="class-a class-b"
       />
     `);
     expect(render(<TestResetComponent />).container.firstChild).toMatchInlineSnapshot(`
       <div
-        class="static-class"
+        class="class-a class-b"
       />
     `);
 
     expect(render(<TestComponent />, { wrapper: RtlWrapper }).container.firstChild).toMatchInlineSnapshot(`
       <div
-        class="static-class"
+        class="class-a class-b"
       />
     `);
     expect(render(<TestResetComponent />, { wrapper: RtlWrapper }).container.firstChild).toMatchInlineSnapshot(`
       <div
-        class="static-class"
+        class="class-a class-b"
       />
     `);
   });
+
+  it('handles HTML strings', () => {
+    expect(render(<TestResetComponent />).container.innerHTML).toMatchInlineSnapshot(
+      `"<div class="class-a class-b"></div>"`,
+    );
+    expect(render(<TestResetComponent />).container.innerHTML).toMatchInlineSnapshot(
+      `"<div class="class-a class-b"></div>"`,
+    );
+  });
 });