test: update ParallaxBanner tests using react-testing-library

Author: jscottsmith

jest-setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package.json

@@ -51,7 +51,8 @@
       "/stories/"
     ],
     "collectCoverage": true,
-    "testURL": "http://localhost"
+    "testURL": "http://localhost",
+    "setupFilesAfterEnv": ["<rootDir>/jest-setup.ts"]
   },
   "peerDependencies": {
     "react": "^16.8.0-0 || >=17.0.1",
@@ -94,6 +95,7 @@
     "@storybook/addons": "^6.4.9",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^6.4.9",
+    "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@types/jest": "^27.0.3",
     "@types/react": "^17.0.35",
@@ -105,6 +107,7 @@
     "postcss": "^8",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-hooks-testing-library": "^0.6.0",
     "react-is": "^17.0.2",
     "react-test-renderer": "^17.0.1",
     "sass": "^1.43.4",

src/components/ParallaxBanner/__snapshots__/index.test.tsx.snap

@@ -1,179 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Expect the <ParallaxBanner> component to render custom child banners correctly 1`] = `
-<div
-  className="parallax-banner test-class"
-  style={
-    Object {
-      "backgroundColor": "blue",
-      "border": "1px solid red",
-      "height": "50vh",
-      "overflow": "hidden",
-      "position": "relative",
-      "width": "100%",
-    }
-  }
->
+exports[`given a <ParallaxBanner> component with all props then it will render banners correctly 1`] = `
+<DocumentFragment>
   <div
-    style={
-      Object {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
+    class="parallax-banner test-class"
+    style="position: relative; overflow: hidden; width: 100%; height: 50vh; background-color: blue; border: 1px solid red;"
   >
     <div
-      className="parallax-banner-layer-0"
-      style={
-        Object {
-          "bottom": "-20px",
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": "-20px",
-        }
-      }
+      style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; will-change: transform; transform: translateY(-20px);"
     >
-      <div>
-        test
-      </div>
+      <div
+        class="parallax-banner-layer-0"
+        data-testid="layer-0"
+        style="background-image: url(https://foo.com/bar.jpg); background-position: center; background-size: cover; position: absolute; top: -20px; right: 0px; bottom: -20px; left: 0px;"
+      />
     </div>
-  </div>
-</div>
-`;
-
-exports[`Expect the <ParallaxBanner> component to render image banners correctly 1`] = `
-<div
-  className="parallax-banner test-class"
-  style={
-    Object {
-      "backgroundColor": "blue",
-      "border": "1px solid red",
-      "height": "50vh",
-      "overflow": "hidden",
-      "position": "relative",
-      "width": "100%",
-    }
-  }
->
-  <div
-    style={
-      Object {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
-  >
-    <div
-      className="parallax-banner-layer-0"
-      style={
-        Object {
-          "backgroundImage": "url(https://foo.com/bar.jpg)",
-          "backgroundPosition": "center",
-          "backgroundSize": "cover",
-          "bottom": "-20px",
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": "-20px",
-        }
-      }
-    />
-  </div>
-  <div>
-    <h1>
-      Foo Bar
-    </h1>
-  </div>
-</div>
-`;
-
-exports[`Expect the <ParallaxBanner> component to render layers with custom props 1`] = `
-<div
-  className="parallax-banner"
-  style={
-    Object {
-      "height": "50vh",
-      "overflow": "hidden",
-      "position": "relative",
-      "width": "100%",
-    }
-  }
->
-  <div
-    style={
-      Object {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
-  >
-    <div
-      className="parallax-banner-layer-0 my-custom-class"
-      id="my-id"
-      style={
-        Object {
-          "backgroundColor": "red",
-          "bottom": "-20px",
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": "-20px",
-        }
-      }
-    />
-  </div>
-</div>
-`;
-
-exports[`Expect the <ParallaxBanner> component to render without expanded margins 1`] = `
-<div
-  className="parallax-banner"
-  style={
-    Object {
-      "height": "50vh",
-      "overflow": "hidden",
-      "position": "relative",
-      "width": "100%",
-    }
-  }
->
-  <div
-    style={
-      Object {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
-  >
-    <div
-      className="parallax-banner-layer-0"
-      style={
-        Object {
-          "bottom": 0,
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        }
-      }
-    >
-      <div>
-        test
-      </div>
+    <div>
+      <h1>
+        Foo Bar
+      </h1>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;