🪟 🔧 Ignore classnames during jest snapshot comparison (airbytehq#17773)

* Ignore classnames during jest snapshot comparison * Replace by simple placeholder * Update snapshots
jhammarstedt · Oct 31, 2022 · db74b82 · db74b82
1 parent 92bccfb
commit db74b82
Show file tree

Hide file tree

Showing 10 changed files with 426 additions and 382 deletions.
diff --git a/airbyte-webapp/package.json b/airbyte-webapp/package.json
@@ -162,6 +162,7 @@
   },
   "jest": {
     "transformIgnorePatterns": [],
+    "snapshotSerializers": ["./scripts/classname-serializer.js"],
     "coveragePathIgnorePatterns": [
       ".stories.tsx"
     ]

diff --git a/airbyte-webapp/scripts/classname-serializer.js b/airbyte-webapp/scripts/classname-serializer.js
@@ -0,0 +1,32 @@
+import { prettyDOM } from "@testing-library/react";
+
+/**
+ * Traverse a tree of nodes and replace all class names with
+ * the count of classnames instead, e.g. "<3 classnames>"
+ */
+const traverseAndRedactClasses = (node) => {
+  if (node.className && typeof node.className === "string") {
+    node.className = `<removed-for-snapshot-test>`;
+  }
+  node.childNodes.forEach(traverseAndRedactClasses);
+};
+
+module.exports = {
+  serialize(val, config) {
+    // Clone the whole rendered DOM tree, since we're modifying it
+    const clone = val.baseElement.cloneNode(true);
+    // Redact all classnames
+    traverseAndRedactClasses(clone);
+    // Use prettyDOM to format the modified DOM as a string.
+    return prettyDOM(clone, Infinity, {
+      indent: config.indent.length,
+      highlight: false,
+    });
+  },
+
+  test(val) {
+    // Only use this serializer when creating a snapshot of RenderResult, which is
+    // the return value of testing-library/react's render method.
+    return val && val.baseElement && val.baseElement instanceof Element;
+  },
+};
diff --git a/airbyte-webapp/src/components/ui/Spinner/Spinner.test.tsx b/airbyte-webapp/src/components/ui/Spinner/Spinner.test.tsx
@@ -4,8 +4,8 @@ import { Spinner } from "./Spinner";
 
 describe("<Spinner />", () => {
   it("should render without crash", () => {
-    const { asFragment } = render(<Spinner />);
+    const component = render(<Spinner />);
 
-    expect(asFragment()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 });
diff --git a/airbyte-webapp/src/components/ui/Spinner/__snapshots__/Spinner.test.tsx.snap b/airbyte-webapp/src/components/ui/Spinner/__snapshots__/Spinner.test.tsx.snap
@@ -1,9 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Spinner /> should render without crash 1`] = `
-<DocumentFragment>
-  <div
-    class="spinner"
-  />
-</DocumentFragment>
+<body>
+  <div>
+    <div
+      class="<removed-for-snapshot-test>"
+    />
+  </div>
+</body>
 `;
diff --git a/airbyte-webapp/src/packages/cloud/views/auth/components/GitBlock/GitBlock.test.tsx b/airbyte-webapp/src/packages/cloud/views/auth/components/GitBlock/GitBlock.test.tsx
@@ -17,17 +17,17 @@ const renderGitBlock = (props?: GitBlockProps) =>
 
 describe("<GitBlock />", () => {
   it("should render with default props", () => {
-    const { asFragment } = renderGitBlock();
+    const component = renderGitBlock();
 
-    expect(asFragment()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
   it("should render with overwritten props", () => {
-    const { asFragment } = renderGitBlock({
+    const component = renderGitBlock({
       titleStyle: { fontSize: "30px" },
       messageStyle: { color: "blue" },
     });
 
-    expect(asFragment()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 });
diff --git a/...pp/src/packages/cloud/views/auth/components/GitBlock/__snapshots__/GitBlock.test.tsx.snap b/...pp/src/packages/cloud/views/auth/components/GitBlock/__snapshots__/GitBlock.test.tsx.snap
@@ -1,97 +1,101 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<GitBlock /> should render with default props 1`] = `
-<DocumentFragment>
-  <div
-    class="container"
-  >
-    <a
-      class="link"
-      href="https://docs.airbyte.com/quickstart/deploy-airbyte"
-      rel="noreferrer"
-      target="_blank"
+<body>
+  <div>
+    <div
+      class="<removed-for-snapshot-test>"
     >
-      <div
-        class="content"
+      <a
+        class="<removed-for-snapshot-test>"
+        href="https://docs.airbyte.com/quickstart/deploy-airbyte"
+        rel="noreferrer"
+        target="_blank"
       >
-        <svg
-          aria-hidden="true"
-          class="svg-inline--fa fa-github icon"
-          data-icon="github"
-          data-prefix="fab"
-          focusable="false"
-          role="img"
-          viewBox="0 0 496 512"
-          xmlns="http://www.w3.org/2000/svg"
+        <div
+          class="<removed-for-snapshot-test>"
         >
-          <path
-            d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
-            fill="currentColor"
-          />
-        </svg>
-        <div>
-          <p
-            class="hostingText"
+          <svg
+            aria-hidden="true"
+            class="svg-inline--fa fa-github icon"
+            data-icon="github"
+            data-prefix="fab"
+            focusable="false"
+            role="img"
+            viewBox="0 0 496 512"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            Interested in self-hosting?
-          </p>
-          <p
-            class="deployText"
-          >
-            Deploy the open-source version on your own infrastructure
-          </p>
+            <path
+              d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
+              fill="currentColor"
+            />
+          </svg>
+          <div>
+            <p
+              class="<removed-for-snapshot-test>"
+            >
+              Interested in self-hosting?
+            </p>
+            <p
+              class="<removed-for-snapshot-test>"
+            >
+              Deploy the open-source version on your own infrastructure
+            </p>
+          </div>
         </div>
-      </div>
-    </a>
+      </a>
+    </div>
   </div>
-</DocumentFragment>
+</body>
 `;
 
 exports[`<GitBlock /> should render with overwritten props 1`] = `
-<DocumentFragment>
-  <div
-    class="container"
-  >
-    <a
-      class="link"
-      href="https://docs.airbyte.com/quickstart/deploy-airbyte"
-      rel="noreferrer"
-      target="_blank"
+<body>
+  <div>
+    <div
+      class="<removed-for-snapshot-test>"
     >
-      <div
-        class="content"
+      <a
+        class="<removed-for-snapshot-test>"
+        href="https://docs.airbyte.com/quickstart/deploy-airbyte"
+        rel="noreferrer"
+        target="_blank"
       >
-        <svg
-          aria-hidden="true"
-          class="svg-inline--fa fa-github icon"
-          data-icon="github"
-          data-prefix="fab"
-          focusable="false"
-          role="img"
-          viewBox="0 0 496 512"
-          xmlns="http://www.w3.org/2000/svg"
+        <div
+          class="<removed-for-snapshot-test>"
         >
-          <path
-            d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
-            fill="currentColor"
-          />
-        </svg>
-        <div>
-          <p
-            class="hostingText"
-            style="font-size: 30px;"
-          >
-            Interested in self-hosting?
-          </p>
-          <p
-            class="deployText"
-            style="color: blue;"
+          <svg
+            aria-hidden="true"
+            class="svg-inline--fa fa-github icon"
+            data-icon="github"
+            data-prefix="fab"
+            focusable="false"
+            role="img"
+            viewBox="0 0 496 512"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            Deploy the open-source version on your own infrastructure
-          </p>
+            <path
+              d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
+              fill="currentColor"
+            />
+          </svg>
+          <div>
+            <p
+              class="<removed-for-snapshot-test>"
+              style="font-size: 30px;"
+            >
+              Interested in self-hosting?
+            </p>
+            <p
+              class="<removed-for-snapshot-test>"
+              style="color: blue;"
+            >
+              Deploy the open-source version on your own infrastructure
+            </p>
+          </div>
         </div>
-      </div>
-    </a>
+      </a>
+    </div>
   </div>
-</DocumentFragment>
+</body>
 `;
diff --git a/...tor/ServiceForm/components/FrequentlyUsedDestinations/FrequentlyUsedDestinations.test.tsx b/...tor/ServiceForm/components/FrequentlyUsedDestinations/FrequentlyUsedDestinations.test.tsx
@@ -18,13 +18,13 @@ const renderFrequentlyUsedDestinationsComponent = (props: FrequentlyUsedDestinat
 
 describe("<FrequentlyUsedDestinations />", () => {
   it("should renders with mock data without crash", () => {
-    const { asFragment } = renderFrequentlyUsedDestinationsComponent({
+    const component = renderFrequentlyUsedDestinationsComponent({
       destinations: mockData,
       onDestinationSelect: jest.fn(),
       propertyPath: "serviceType",
     });
 
-    expect(asFragment()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
   it("should call provided handler with right param", async () => {