Upgrade (ts)jest and deps (#292)

[#207] Upgrade (ts)jest and deps
eBay · Nov 29, 2023 · 41b4e23 · 41b4e23
1 parent 42ed49b
commit 41b4e23
Show file tree

Hide file tree

Showing 17 changed files with 1,499 additions and 1,432 deletions.
diff --git a/config/jest/setup-tests.ts b/config/jest/setup-tests.ts
@@ -1,9 +1,6 @@
-export interface Global extends NodeJS.Global {
-  document: Document;
-  window: Window;
-}
+import '@testing-library/jest-dom'
 
-declare var global: Global;
+declare var global: typeof globalThis;
 
 if (typeof window.URL.createObjectURL === 'undefined') {
   Object.defineProperty(window.URL, 'createObjectURL', { value: () => {} });

diff --git a/jest.config.js b/jest.config.js
@@ -1,4 +1,5 @@
 module.exports = {
+    'testEnvironment': 'jsdom',
     'resolver': 'jest-pnp-resolver',
     'moduleNameMapper': {
         '\\.(css|less)$': 'identity-obj-proxy'
@@ -45,10 +46,7 @@ module.exports = {
     'coverageReporters': [
         'json', 'lcov', 'text', 'cobertura'
     ],
-    setupFiles: [
-        '<rootDir>/config/jest/setup-tests.ts'
-    ],
     setupFilesAfterEnv: [
-        '@testing-library/jest-dom/extend-expect'
+        '<rootDir>/config/jest/setup-tests.ts'
     ]
 }
diff --git a/package.json b/package.json
@@ -64,14 +64,13 @@
     "@storybook/react": "^6.5.6",
     "@storybook/storybook-deployer": "^2.8.11",
     "@testing-library/dom": "^7.29.4",
-    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^12",
     "@testing-library/react-hooks": "^7",
     "@testing-library/user-event": "^12",
     "@types/classnames": "^2.2.11",
     "@types/react": "^16.0",
     "@types/react-dom": "^16.0",
-    "@types/testing-library__jest-dom": "^5.9.5",
     "@typescript-eslint/eslint-plugin": "^4.4.0",
     "@typescript-eslint/parser": "^4.10.0",
     "babel-loader": "^8.1.0",
@@ -81,14 +80,15 @@
     "eslint": "^7.15.0",
     "eslint-config-ebay": "^0.1.5",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^24.1.3",
+    "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.21.5",
     "husky": "^8.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^24.8.0",
-    "jest-junit": "^8.0.0",
-    "jest-pnp-resolver": "^1.0.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-junit": "^16.0.0",
+    "jest-pnp-resolver": "^1.2.3",
     "lint-staged": "^10.5.3",
     "node-require-context": "^1.0.0",
     "react": "^16.0.0",
@@ -98,7 +98,7 @@
     "storybook-addon-jsx": "^7.3.14",
     "style-loader": "^2.0.0",
     "svgson": "^4.0.0",
-    "ts-jest": "^24",
+    "ts-jest": "^29.1.1",
     "ts-loader": "^8.0.7",
     "typescript": "4"
   },

diff --git a/scripts/__tests__/__snapshots__/update-icons.spec.ts.snap b/scripts/__tests__/__snapshots__/update-icons.spec.ts.snap
@@ -9,10 +9,10 @@ import React, { FC } from 'react'
 
 const EbaySvg: FC = () => (
     <svg style={{ position: 'absolute', height: '0px', width: '0px' }}>
-        <symbol id=\\"icon-add-20\\" viewBox=\\"0 0 20 20\\"><path className=\\"some-class-name\\" d=\\"M19 9h-8V1a1 1 0 00-2 0v8H1a1 1 0 000 2h8v8a1 1 0 002 0v-8h8a1 1 0 000-2z\\" style={{transform: 'rotateX(10deg)', backgroundColor: 'white'}}/></symbol>
-        <symbol id=\\"icon-social-messenger-24\\" viewBox=\\"0 0 24 24\\"><g clipPath=\\"url(#clip0_41192_49714)\\"><path d=\\"M12 0C5.24 0 0 4.952 0 11.64c0 3.499 1.434 6.521 3.769 8.61a.957.957 0 01.322.684l.066 2.136a.96.96 0 001.346.849l2.383-1.05a.958.958 0 01.64-.047c1.132.308 2.3.462 3.474.458 6.76 0 12-4.95 12-11.64S18.76 0 12 0zm7.206 8.956l-3.525 5.594a1.799 1.799 0 01-2.603.48l-2.803-2.103a.72.72 0 00-.868.003l-3.786 2.872c-.505.384-1.165-.221-.827-.758l3.525-5.593a1.8 1.8 0 012.603-.48l2.803 2.103a.72.72 0 00.868-.002l3.786-2.874c.505-.384 1.165.221.827.758z\\"/></g><defs><clipPath id=\\"clip0_41192_49714\\"><path d=\\"M0 0h24v24H0z\\" fill=\\"var(--color-social-icons-foreground, #fff)\\"/></clipPath></defs></symbol>
-        <symbol id=\\"icon-social-whatsapp-24\\" viewBox=\\"0 0 24 24\\"><path clipRule=\\"evenodd\\" d=\\"M20.5 3.5A11.9 11.9 0 0 0 16.6.9 12 12 0 0 0 12 0 12 12 0 0 0 .2 11.9a11.8 11.8 0 0 0 1.6 6L0 24l6.3-1.7a12 12 0 0 0 5.7 1.5 12 12 0 0 0 12-11.9 11.8 11.8 0 0 0-.9-4.6 11.8 11.8 0 0 0-2.6-3.8zm-8.4 18.3A10 10 0 0 1 7 20.4l-.4-.2-3.7 1 1-3.7-.3-.3a9.8 9.8 0 0 1-1.5-5.3A10 10 0 0 1 16 2.8a10 10 0 0 1 3 2.1 9.8 9.8 0 0 1 2.9 7 10 10 0 0 1-10 9.9zm5.4-7.4-2-1c-.3 0-.5-.1-.7.2l-1 1.1c-.1.2-.3.2-.6.1-.3-.2-1.3-.5-2.4-1.5a8.9 8.9 0 0 1-1.7-2c-.1-.3 0-.5.2-.6l.4-.6c.2-.1.2-.3.3-.5v-.5L9 7c-.2-.6-.4-.5-.6-.5a12 12 0 0 0-.6 0 1.1 1.1 0 0 0-.8.4c-.3.3-1 1-1 2.4 0 1.5 1 3 1.2 3.1.1.2 2.1 3.2 5.1 4.5.6.2 1.1.5 1.7.6a4 4 0 0 0 1.9.1c.6 0 1.7-.7 2-1.4l.2-1.4-.6-.3z\\" fillRule=\\"evenodd\\"/></symbol>
-        <symbol id=\\"icon-program-badge-authenticity-guaranteed-48\\" viewBox=\\"0 0 48 48\\"><path d=\\"M45.552 17.36A10.247 10.247 0 0148 24.055c-.01 2.52-.93 4.823-2.444 6.608-.884 1.044-1.502 2.318-1.586 3.683a10.18 10.18 0 01-2.982 6.626 10.242 10.242 0 01-6.614 2.968c-1.372.088-2.656.7-3.702 1.59A10.31 10.31 0 0123.96 48c-2.564 0-4.906-.93-6.712-2.47-1.046-.89-2.33-1.502-3.702-1.59a10.242 10.242 0 01-6.614-2.968 10.194 10.194 0 01-2.994-6.75c-.07-1.373-.688-2.657-1.568-3.715A10.241 10.241 0 010 23.904c.01-2.487.904-4.761 2.382-6.535.87-1.046 1.486-2.314 1.564-3.67A10.181 10.181 0 016.932 7.03a10.242 10.242 0 016.614-2.968c1.372-.088 2.656-.702 3.702-1.592A10.32 10.32 0 0123.96 0c2.564 0 4.906.932 6.712 2.47 1.046.89 2.33 1.504 3.704 1.592a10.241 10.241 0 016.612 2.968 10.178 10.178 0 012.984 6.645c.082 1.364.694 2.642 1.58 3.684zm-9.088-3.147v-.002h-.002a1.6 1.6 0 00-2.262.012v.002L19.594 28.971l-4.528-4.487-.02-.02a1.6 1.6 0 00-2.262.01l-.002.001a1.6 1.6 0 00.012 2.262l.003.003 5.681 5.63h.002c.63.62 1.642.615 2.264-.013l-.008-.008 1.124-1.134.006.006 14.606-14.746h.002a1.6 1.6 0 00-.01-2.262z\\"/></symbol>
+        <symbol id="icon-add-20" viewBox="0 0 20 20"><path className="some-class-name" d="M19 9h-8V1a1 1 0 00-2 0v8H1a1 1 0 000 2h8v8a1 1 0 002 0v-8h8a1 1 0 000-2z" style={{transform: 'rotateX(10deg)', backgroundColor: 'white'}}/></symbol>
+        <symbol id="icon-social-messenger-24" viewBox="0 0 24 24"><g clipPath="url(#clip0_41192_49714)"><path d="M12 0C5.24 0 0 4.952 0 11.64c0 3.499 1.434 6.521 3.769 8.61a.957.957 0 01.322.684l.066 2.136a.96.96 0 001.346.849l2.383-1.05a.958.958 0 01.64-.047c1.132.308 2.3.462 3.474.458 6.76 0 12-4.95 12-11.64S18.76 0 12 0zm7.206 8.956l-3.525 5.594a1.799 1.799 0 01-2.603.48l-2.803-2.103a.72.72 0 00-.868.003l-3.786 2.872c-.505.384-1.165-.221-.827-.758l3.525-5.593a1.8 1.8 0 012.603-.48l2.803 2.103a.72.72 0 00.868-.002l3.786-2.874c.505-.384 1.165.221.827.758z"/></g><defs><clipPath id="clip0_41192_49714"><path d="M0 0h24v24H0z" fill="var(--color-social-icons-foreground, #fff)"/></clipPath></defs></symbol>
+        <symbol id="icon-social-whatsapp-24" viewBox="0 0 24 24"><path clipRule="evenodd" d="M20.5 3.5A11.9 11.9 0 0 0 16.6.9 12 12 0 0 0 12 0 12 12 0 0 0 .2 11.9a11.8 11.8 0 0 0 1.6 6L0 24l6.3-1.7a12 12 0 0 0 5.7 1.5 12 12 0 0 0 12-11.9 11.8 11.8 0 0 0-.9-4.6 11.8 11.8 0 0 0-2.6-3.8zm-8.4 18.3A10 10 0 0 1 7 20.4l-.4-.2-3.7 1 1-3.7-.3-.3a9.8 9.8 0 0 1-1.5-5.3A10 10 0 0 1 16 2.8a10 10 0 0 1 3 2.1 9.8 9.8 0 0 1 2.9 7 10 10 0 0 1-10 9.9zm5.4-7.4-2-1c-.3 0-.5-.1-.7.2l-1 1.1c-.1.2-.3.2-.6.1-.3-.2-1.3-.5-2.4-1.5a8.9 8.9 0 0 1-1.7-2c-.1-.3 0-.5.2-.6l.4-.6c.2-.1.2-.3.3-.5v-.5L9 7c-.2-.6-.4-.5-.6-.5a12 12 0 0 0-.6 0 1.1 1.1 0 0 0-.8.4c-.3.3-1 1-1 2.4 0 1.5 1 3 1.2 3.1.1.2 2.1 3.2 5.1 4.5.6.2 1.1.5 1.7.6a4 4 0 0 0 1.9.1c.6 0 1.7-.7 2-1.4l.2-1.4-.6-.3z" fillRule="evenodd"/></symbol>
+        <symbol id="icon-program-badge-authenticity-guaranteed-48" viewBox="0 0 48 48"><path d="M45.552 17.36A10.247 10.247 0 0148 24.055c-.01 2.52-.93 4.823-2.444 6.608-.884 1.044-1.502 2.318-1.586 3.683a10.18 10.18 0 01-2.982 6.626 10.242 10.242 0 01-6.614 2.968c-1.372.088-2.656.7-3.702 1.59A10.31 10.31 0 0123.96 48c-2.564 0-4.906-.93-6.712-2.47-1.046-.89-2.33-1.502-3.702-1.59a10.242 10.242 0 01-6.614-2.968 10.194 10.194 0 01-2.994-6.75c-.07-1.373-.688-2.657-1.568-3.715A10.241 10.241 0 010 23.904c.01-2.487.904-4.761 2.382-6.535.87-1.046 1.486-2.314 1.564-3.67A10.181 10.181 0 016.932 7.03a10.242 10.242 0 016.614-2.968c1.372-.088 2.656-.702 3.702-1.592A10.32 10.32 0 0123.96 0c2.564 0 4.906.932 6.712 2.47 1.046.89 2.33 1.504 3.704 1.592a10.241 10.241 0 016.612 2.968 10.178 10.178 0 012.984 6.645c.082 1.364.694 2.642 1.58 3.684zm-9.088-3.147v-.002h-.002a1.6 1.6 0 00-2.262.012v.002L19.594 28.971l-4.528-4.487-.02-.02a1.6 1.6 0 00-2.262.01l-.002.001a1.6 1.6 0 00.012 2.262l.003.003 5.681 5.63h.002c.63.62 1.642.615 2.264-.013l-.008-.008 1.124-1.134.006.006 14.606-14.746h.002a1.6 1.6 0 00-.01-2.262z"/></symbol>
     </svg>)
 
 export default EbaySvg

diff --git a/src/ebay-carousel/__tests__/__snapshots__/index.spec.tsx.snap b/src/ebay-carousel/__tests__/__snapshots__/index.spec.tsx.snap
@@ -158,70 +158,70 @@ exports[`Storyshots ebay-carousel Items Per Slide 1`] = `
           <li
             aria-hidden="false"
             class="carousel__snap-point"
-            style="color: rgb(10, 28, 107); background: rgb(194, 245, 255); font-size: 24px; font-weight: bold; height: 120px; line-height: 120px; text-align: center; margin-right: 16px;"
+            style="color: rgb(10, 28, 107); background: rgb(194, 245, 255); font-size: 24px; font-weight: bold; width: calc(33.333333333333336% - 10.666666666666666px); height: 120px; line-height: 120px; text-align: center; margin-right: 16px;"
           >
             Item 1
           </li>
           <li
             aria-hidden="false"
             class="demo-card"
-            style="color: rgb(10, 28, 107); background: rgb(194, 245, 255); font-size: 24px; font-weight: bold; height: 120px; line-height: 120px; text-align: center; margin-right: 16px;"
+            style="color: rgb(10, 28, 107); background: rgb(194, 245, 255); font-size: 24px; font-weight: bold; width: calc(33.333333333333336% - 10.666666666666666px); height: 120px; line-height: 120px; text-align: center; margin-right: 16px;"
           >
             Item 2
           </li>
           <li
             aria-hidden="false"
             class="demo-card"
-            style="color: rgb(10, 28, 107); background: rgb(194, 245, 255); font-size: 24px; font-weight: bold; height: 120px; line-height: 120px; text-align: center; margin-right: 16px;"
+            style="color: rgb(10, 28, 107); background: rgb(194, 245, 255); font-size: 24px; font-weight: bold; width: calc(33.333333333333336% - 10.666666666666666px); height: 120px; line-height: 120px; text-align: center; margin-right: 16px;"
           >
             Item 3
           </li>
           <li
             aria-hidden="false"
             class="carousel__snap-point"
-            style="color: rgb(10, 28, 107); background: rgb(194, 245, 255); font-size: 24px; font-weight: bold; height: 120px; line-height: 120px; text-align: center; margin-right: 16px;"
+            style="color: rgb(10, 28, 107); background: rgb(194, 245, 255); font-size: 24px; font-weight: bold; width: calc(33.333333333333336% - 10.666666666666666px); height: 120px; line-height: 120px; text-align: center; margin-right: 16px;"
           >
             Item 4
           </li>
           <li
             aria-hidden="false"
             class="demo-card"
-            style="color: rgb(10, 28, 107); background: rgb(194, 245, 255); font-size: 24px; font-weight: bold; height: 120px; line-height: 120px; text-align: center; margin-right: 16px;"
+            style="color: rgb(10, 28, 107); background: rgb(194, 245, 255); font-size: 24px; font-weight: bold; width: calc(33.333333333333336% - 10.666666666666666px); height: 120px; line-height: 120px; text-align: center; margin-right: 16px;"
           >
             Item 5
           </li>
           <li
             aria-hidden="false"
             class="demo-card"
-            style="color: rgb(10, 28, 107); background: rgb(194, 245, 255); font-size: 24px; font-weight: bold; height: 120px; line-height: 120px; text-align: center; margin-right: 16px;"
+            style="color: rgb(10, 28, 107); background: rgb(194, 245, 255); font-size: 24px; font-weight: bold; width: calc(33.333333333333336% - 10.666666666666666px); height: 120px; line-height: 120px; text-align: center; margin-right: 16px;"
           >
             Item 6
           </li>
           <li
             aria-hidden="false"
             class="carousel__snap-point"
-            style="color: rgb(10, 28, 107); background: rgb(194, 245, 255); font-size: 24px; font-weight: bold; height: 120px; line-height: 120px; text-align: center; margin-right: 16px;"
+            style="color: rgb(10, 28, 107); background: rgb(194, 245, 255); font-size: 24px; font-weight: bold; width: calc(33.333333333333336% - 10.666666666666666px); height: 120px; line-height: 120px; text-align: center; margin-right: 16px;"
           >
             Item 7
           </li>
           <li
             aria-hidden="false"
             class="demo-card"
-            style="color: rgb(10, 28, 107); background: rgb(194, 245, 255); font-size: 24px; font-weight: bold; height: 120px; line-height: 120px; text-align: center; margin-right: 16px;"
+            style="color: rgb(10, 28, 107); background: rgb(194, 245, 255); font-size: 24px; font-weight: bold; width: calc(33.333333333333336% - 10.666666666666666px); height: 120px; line-height: 120px; text-align: center; margin-right: 16px;"
           >
             Item 8
           </li>
           <li
             aria-hidden="false"
             class="demo-card"
-            style="color: rgb(10, 28, 107); background: rgb(194, 245, 255); font-size: 24px; font-weight: bold; height: 120px; line-height: 120px; text-align: center; margin-right: 16px;"
+            style="color: rgb(10, 28, 107); background: rgb(194, 245, 255); font-size: 24px; font-weight: bold; width: calc(33.333333333333336% - 10.666666666666666px); height: 120px; line-height: 120px; text-align: center; margin-right: 16px;"
           >
             Item 9
           </li>
           <li
             aria-hidden="false"
             class="carousel__snap-point"
-            style="color: rgb(10, 28, 107); background: rgb(194, 245, 255); font-size: 24px; font-weight: bold; height: 120px; line-height: 120px; text-align: center;"
+            style="color: rgb(10, 28, 107); background: rgb(194, 245, 255); font-size: 24px; font-weight: bold; width: calc(33.333333333333336% - 10.666666666666666px); height: 120px; line-height: 120px; text-align: center;"
           >
             Item 10
           </li>

diff --git a/src/ebay-field/__tests__/__snapshots__/index.spec.tsx.snap b/src/ebay-field/__tests__/__snapshots__/index.spec.tsx.snap
@@ -283,7 +283,7 @@ exports[`Storyshots ebay-field Default - inline 1`] = `
     <span
       className="checkbox"
       style={
-        Object {
+        {
           "alignItems": "center",
         }
       }
@@ -328,7 +328,7 @@ exports[`Storyshots ebay-field Default - inline 1`] = `
 `;
 
 exports[`Storyshots ebay-field Labels on the right 1`] = `
-Array [
+[
   <p>
     <span
       className="field"
@@ -392,7 +392,7 @@ Array [
       <span
         className="checkbox"
         style={
-          Object {
+          {
             "alignItems": "center",
           }
         }

diff --git a/src/ebay-infotip/__tests__/__snapshots__/index.spec.tsx.snap b/src/ebay-infotip/__tests__/__snapshots__/index.spec.tsx.snap
@@ -37,7 +37,7 @@ exports[`Storyshots ebay-infotip Custom button content (With render prop) 1`] =
       </button>
       <span
         class="infotip__overlay"
-        style="transform: scale3d(1,1,1); left: -10px;"
+        style="transform: scale3d(1,1,1); left: -10px; top: calc(100% + 2px);"
       >
         <span
           class="infotip__pointer infotip__pointer--top-left"
@@ -111,7 +111,7 @@ exports[`Storyshots ebay-infotip Custom icon 1`] = `
       </button>
       <span
         class="infotip__overlay"
-        style="transform: translateX(-50%) scale3d(1,1,1); left: 50%;"
+        style="transform: translateX(-50%) scale3d(1,1,1); left: 50%; bottom: calc(100% + 12px);"
       >
         <span
           class="infotip__pointer infotip__pointer--bottom"
@@ -185,7 +185,7 @@ exports[`Storyshots ebay-infotip Default 1`] = `
       </button>
       <span
         class="infotip__overlay"
-        style="transform: translateX(-50%) scale3d(1,1,1); left: 50%;"
+        style="transform: translateX(-50%) scale3d(1,1,1); left: 50%; bottom: calc(100% + 12px);"
       >
         <span
           class="infotip__pointer infotip__pointer--bottom"
@@ -260,7 +260,7 @@ exports[`Storyshots ebay-infotip Disabled 1`] = `
       </button>
       <span
         class="infotip__overlay"
-        style="transform: translateX(-50%) scale3d(1,1,1); left: 50%;"
+        style="transform: translateX(-50%) scale3d(1,1,1); left: 50%; bottom: calc(100% + 12px);"
       >
         <span
           class="infotip__pointer infotip__pointer--bottom"
@@ -334,7 +334,7 @@ exports[`Storyshots ebay-infotip Expanded by default 1`] = `
       </button>
       <span
         class="infotip__overlay"
-        style="transform: scale3d(1,1,1); left: -10px;"
+        style="transform: scale3d(1,1,1); left: -10px; top: calc(100% + 2px);"
       >
         <span
           class="infotip__pointer infotip__pointer--top-left"
@@ -413,7 +413,7 @@ exports[`Storyshots ebay-infotip In paragraph 1`] = `
         </button>
         <span
           class="infotip__overlay"
-          style="transform: translateX(-50%) scale3d(1,1,1); left: 50%;"
+          style="transform: translateX(-50%) scale3d(1,1,1); left: 50%; bottom: calc(100% + 12px);"
         >
           <span
             class="infotip__pointer infotip__pointer--bottom"
@@ -579,7 +579,7 @@ exports[`Storyshots ebay-infotip Pointer direction 1`] = `
         </button>
         <span
           class="infotip__overlay"
-          style="transform: translateX(-50%) scale3d(1,1,1); left: 50%;"
+          style="transform: translateX(-50%) scale3d(1,1,1); left: 50%; top: calc(100% + 2px);"
         >
           <span
             class="infotip__pointer infotip__pointer--top"
@@ -649,7 +649,7 @@ exports[`Storyshots ebay-infotip Pointer direction 1`] = `
         </button>
         <span
           class="infotip__overlay"
-          style="transform: scale3d(1,1,1); left: -10px;"
+          style="transform: scale3d(1,1,1); left: -10px; top: calc(100% + 2px);"
         >
           <span
             class="infotip__pointer infotip__pointer--top-left"
@@ -719,7 +719,7 @@ exports[`Storyshots ebay-infotip Pointer direction 1`] = `
         </button>
         <span
           class="infotip__overlay"
-          style="transform: scale3d(1,1,1); right: -10px;"
+          style="transform: scale3d(1,1,1); right: -10px; top: calc(100% + 2px);"
         >
           <span
             class="infotip__pointer infotip__pointer--top-right"
@@ -999,7 +999,7 @@ exports[`Storyshots ebay-infotip Pointer direction 1`] = `
         </button>
         <span
           class="infotip__overlay"
-          style="transform: translateX(-50%) scale3d(1,1,1); left: 50%;"
+          style="transform: translateX(-50%) scale3d(1,1,1); left: 50%; bottom: calc(100% + 12px);"
         >
           <span
             class="infotip__pointer infotip__pointer--bottom"
@@ -1069,7 +1069,7 @@ exports[`Storyshots ebay-infotip Pointer direction 1`] = `
         </button>
         <span
           class="infotip__overlay"
-          style="transform: scale3d(1,1,1); left: -10px;"
+          style="transform: scale3d(1,1,1); left: -10px; bottom: calc(100% + 12px);"
         >
           <span
             class="infotip__pointer infotip__pointer--bottom-left"
@@ -1139,7 +1139,7 @@ exports[`Storyshots ebay-infotip Pointer direction 1`] = `
         </button>
         <span
           class="infotip__overlay"
-          style="transform: scale3d(1,1,1); right: -10px;"
+          style="transform: scale3d(1,1,1); right: -10px; bottom: calc(100% + 12px);"
         >
           <span
             class="infotip__pointer infotip__pointer--bottom-right"
@@ -1488,7 +1488,7 @@ exports[`Storyshots ebay-infotip Text instead of icon 1`] = `
       </button>
       <span
         class="infotip__overlay"
-        style="transform: scale3d(1,1,1); left: -10px;"
+        style="transform: scale3d(1,1,1); left: -10px; top: calc(100% + 2px);"
       >
         <span
           class="infotip__pointer infotip__pointer--top-left"

diff --git a/src/ebay-listbox-button/__tests__/__snapshots__/index.spec.tsx.snap b/src/ebay-listbox-button/__tests__/__snapshots__/index.spec.tsx.snap
@@ -105,7 +105,7 @@ exports[`Storyshots ebay-listbox-button Default - no selected option 1`] = `
 `;
 
 exports[`Storyshots ebay-listbox-button Default - with a11y prefix 1`] = `
-Array [
+[
   <label
     id="listbox-button__label"
   >

diff --git a/src/ebay-progress-bar/__tests__/__snapshots__/index.spec.tsx.snap b/src/ebay-progress-bar/__tests__/__snapshots__/index.spec.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots ebay-progress-bar Custom Max 1`] = `
-Array [
+[
   <p>
     50/200
     <br />
@@ -24,7 +24,7 @@ Array [
 `;
 
 exports[`Storyshots ebay-progress-bar Default 1`] = `
-Array [
+[
   <p>
     0%
     <br />
-Original file line number
+Diff line change
@@ Expand Up @@
     `;
     exports[`Storyshots ebay-listbox-button Default - with a11y prefix 1`] = `
-    Array [
+    [
       <label
         id="listbox-button__label"
       >
@@ Expand Down @@