fix: upgraded Jest to v29

okta · Sep 20, 2022 · 3872c7e · 3872c7e
1 parent b23cb4b
commit 3872c7e
Show file tree

Hide file tree

Showing 23 changed files with 1,474 additions and 1,077 deletions.
diff --git a/packages/babel-plugin-fully-specified/jest.config.cjs b/packages/babel-plugin-fully-specified/jest.config.cjs
@@ -0,0 +1,15 @@
+/*!
+ * Copyright (c) 2021-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+module.exports = {
+  testEnvironment: "jsdom",
+};
diff --git a/packages/babel-plugin-fully-specified/package.json b/packages/babel-plugin-fully-specified/package.json
@@ -21,11 +21,11 @@
     "@babel/types": "^7.14.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.0",
+    "@babel/core": "^7.19.1",
     "@okta/odyssey-lifecycle": "^0.15.0",
     "@okta/odyssey-typescript": "^0.15.0",
-    "babel-jest": "^26.6.3",
-    "jest": "^26.6.3",
+    "jest": "^29.0.3",
+    "jest-environment-jsdom": "^29.0.3",
     "typescript": "^4.4.4"
   }
 }
diff --git a/packages/babel-plugin-fully-specified/src/__tests__/__snapshots__/plugin.test.js.snap b/packages/babel-plugin-fully-specified/src/__tests__/__snapshots__/plugin.test.js.snap
@@ -1,45 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`plugin should fully qualify the module exports specifiers 1`] = `
-"export { level } from \\"./index.js\\";
-export { levelIndex } from \\"./index.js\\";
-export { oneBackLevel } from \\"../index.js\\";
-export { oneBackLevelIndex } from \\"../index.js\\";
-export { twoBackLevel } from \\"../../index.js\\";
-export { twoBackLevelIndex } from \\"../../index.js\\";
-export { somethingBack } from \\"../lib/something.js\\";
-export { somethingBackTest } from \\"../lib/something.test.js\\";
-export { something } from \\"./lib/something.js\\";
-export { somethingTest } from \\"./lib/something.test.js\\";
-export { something as another } from \\"./lib/something.js\\";
-export { somethingTest as anotherTest } from \\"./lib/something.test.js\\";
-export * as anotherModule from \\"./lib/something.js\\";
-export * as anotherModuleTest from \\"./lib/something.test.js\\";
-export * from \\"./lib/something.js\\";
-export * from \\"./lib/something.test.js\\";"
+"export { level } from "./index.js";
+export { levelIndex } from "./index.js";
+export { oneBackLevel } from "../index.js";
+export { oneBackLevelIndex } from "../index.js";
+export { twoBackLevel } from "../../index.js";
+export { twoBackLevelIndex } from "../../index.js";
+export { somethingBack } from "../lib/something.js";
+export { somethingBackTest } from "../lib/something.test.js";
+export { something } from "./lib/something.js";
+export { somethingTest } from "./lib/something.test.js";
+export { something as another } from "./lib/something.js";
+export { somethingTest as anotherTest } from "./lib/something.test.js";
+export * as anotherModule from "./lib/something.js";
+export * as anotherModuleTest from "./lib/something.test.js";
+export * from "./lib/something.js";
+export * from "./lib/something.test.js";"
 `;
 
 exports[`plugin should fully qualify the module imports specifiers 1`] = `
-"import { level } from \\"./index.js\\";
-import { levelIndex } from \\"./index.js\\";
-import { oneBackLevel } from \\"../index.js\\";
-import { oneBackLevelIndex } from \\"../index.js\\";
-import { twoBackLevel } from \\"../../index.js\\";
-import { twoBackLevelIndex } from \\"../../index.js\\";
-import { somethingBack } from \\"../lib/something.js\\";
-import { somethingBackTest } from \\"../lib/something.test.js\\";
-import { export1, export2 as alias2 } from \\"./lib/something.js\\";
-import { export1Test, export2 as alias2Test } from \\"./lib/something.test.js\\";
-import { something } from \\"./lib/something.js\\";
-import { somethingTest } from \\"./lib/something.test.js\\";
-import { something as other } from \\"./lib/something.js\\";
-import { something as otherTest } from \\"./lib/something.test.js\\";
-import anotherImport from \\"./lib/something.js\\";
-import anotherImportTest from \\"./lib/something.test.js\\";
-import another, { otherImport } from \\"./lib/something.js\\";
-import anotherTest, { otherImportTest } from \\"./lib/something.test.js\\";
-import * as Something from \\"./lib/something.js\\";
-import * as SomethingTest from \\"./lib/something.test.js\\";"
+"import { level } from "./index.js";
+import { levelIndex } from "./index.js";
+import { oneBackLevel } from "../index.js";
+import { oneBackLevelIndex } from "../index.js";
+import { twoBackLevel } from "../../index.js";
+import { twoBackLevelIndex } from "../../index.js";
+import { somethingBack } from "../lib/something.js";
+import { somethingBackTest } from "../lib/something.test.js";
+import { export1, export2 as alias2 } from "./lib/something.js";
+import { export1Test, export2 as alias2Test } from "./lib/something.test.js";
+import { something } from "./lib/something.js";
+import { somethingTest } from "./lib/something.test.js";
+import { something as other } from "./lib/something.js";
+import { something as otherTest } from "./lib/something.test.js";
+import anotherImport from "./lib/something.js";
+import anotherImportTest from "./lib/something.test.js";
+import another, { otherImport } from "./lib/something.js";
+import anotherTest, { otherImportTest } from "./lib/something.test.js";
+import * as Something from "./lib/something.js";
+import * as SomethingTest from "./lib/something.test.js";"
 `;
 
 exports[`plugin should skip bare module specifiers 1`] = `

diff --git a/packages/eslint-plugin-odyssey/package.json b/packages/eslint-plugin-odyssey/package.json
@@ -13,6 +13,6 @@
   },
   "devDependencies": {
     "eslint": "^7.27.0",
-    "jest": "^26.6.3"
+    "jest": "^29.0.3"
   }
 }
diff --git a/packages/odyssey-babel-plugin/package.json b/packages/odyssey-babel-plugin/package.json
@@ -26,8 +26,7 @@
     "@okta/odyssey-lifecycle": "^0.15.0",
     "@okta/odyssey-postcss-preset": "^0.15.0",
     "@okta/odyssey-typescript": "^0.15.0",
-    "babel-jest": "^26.6.3",
-    "jest": "^26.6.3",
+    "jest": "^29.0.3",
     "postcss": "^8.3.6",
     "typescript": "^4.4.4"
   },

diff --git a/packages/odyssey-babel-plugin/src/__tests__/__snapshots__/importVisitor.test.js.snap b/packages/odyssey-babel-plugin/src/__tests__/__snapshots__/importVisitor.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`transformStyles import visitor transforms styles as expected 1`] = `
-Object {
+{
   "__digest": "0776a6",
   "__template": [Function],
   "autoprefixed": "ods-58h7mt",

diff --git a/packages/odyssey-babel-plugin/src/__tests__/__snapshots__/requireVisitor.test.js.snap b/packages/odyssey-babel-plugin/src/__tests__/__snapshots__/requireVisitor.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`transformStyles require visitor transforms styles as expected 1`] = `
-Object {
+{
   "__digest": "0776a6",
   "__template": [Function],
   "autoprefixed": "ods-58h7mt",

diff --git a/packages/odyssey-babel-plugin/src/compileFactory.ts b/packages/odyssey-babel-plugin/src/compileFactory.ts
@@ -47,10 +47,10 @@ export default function compileFactory(): Compile {
       delete result.message.warning;
     }
 
+    worker.unref();
+
     return result.message;
   };
 
-  worker.unref();
-
   return compile;
 }
diff --git a/packages/odyssey-postcss-preset/package.json b/packages/odyssey-postcss-preset/package.json
@@ -28,7 +28,7 @@
     "@okta/odyssey-lifecycle": "^0.15.0",
     "@okta/odyssey-typescript": "^0.15.0",
     "@types/cssnano": "^4.0.1",
-    "jest": "^26.6.3",
+    "jest": "^29.0.3",
     "typescript": "^4.4.4"
   },
   "peerDependencies": {

diff --git a/packages/odyssey-postcss-scss/package.json b/packages/odyssey-postcss-scss/package.json
@@ -23,7 +23,7 @@
     "@okta/odyssey-lifecycle": "^0.15.0",
     "@okta/odyssey-typescript": "^0.15.0",
     "@types/sass": "^1.16.1",
-    "jest": "^26.6.3",
+    "jest": "^29.0.3",
     "postcss": "^8.3.6",
     "typescript": "^4.4.4"
   },

diff --git a/packages/odyssey-postcss-theme/package.json b/packages/odyssey-postcss-theme/package.json
@@ -19,7 +19,7 @@
   "devDependencies": {
     "@okta/odyssey-lifecycle": "^0.15.0",
     "@okta/odyssey-typescript": "^0.15.0",
-    "jest": "^26.6.3",
+    "jest": "^29.0.3",
     "typescript": "^4.4.4"
   },
   "peerDependencies": {

diff --git a/packages/odyssey-react-mui/jest.config.cjs b/packages/odyssey-react-mui/jest.config.cjs
@@ -12,4 +12,5 @@
 
 module.exports = {
   setupFilesAfterEnv: ["./jest.setup.js"],
+  testEnvironment: "jsdom",
 };
diff --git a/packages/odyssey-react-mui/package.json b/packages/odyssey-react-mui/package.json
@@ -45,8 +45,9 @@
     "babel-jest": "^26.6.3",
     "babel-plugin-import": "^1.13.5",
     "eslint": "^7.27.0",
-    "jest": "^26.6.3",
+    "jest": "^29.0.3",
     "jest-axe": "^5.0.1",
+    "jest-environment-jsdom": "^29.0.3",
     "npm-run-all": "^4.1.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

diff --git a/packages/odyssey-react-theme/jest.config.cjs b/packages/odyssey-react-theme/jest.config.cjs
@@ -12,6 +12,7 @@
 
 module.exports = {
   setupFilesAfterEnv: ["./jest.setup.js"],
+  testEnvironment: "jsdom",
   transformIgnorePatterns: [
     "<rootDir>/node_modules/(?!@okta/odyssey-design-tokens/)",
   ],

diff --git a/packages/odyssey-react-theme/package.json b/packages/odyssey-react-theme/package.json
@@ -37,7 +37,8 @@
     "@types/react-dom": "^17.0.5",
     "babel-jest": "^26.6.3",
     "eslint": "^7.27.0",
-    "jest": "^26.6.3",
+    "jest": "^29.0.3",
+    "jest-environment-jsdom": "^29.0.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "regenerator-runtime": "^0.13.7",

diff --git a/packages/odyssey-react/jest.config.cjs b/packages/odyssey-react/jest.config.cjs
@@ -12,4 +12,5 @@
 
 module.exports = {
   setupFilesAfterEnv: ["./jest.setup.js"],
+  testEnvironment: "jsdom",
 };
diff --git a/packages/odyssey-react/package.json b/packages/odyssey-react/package.json
@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@okta/odyssey-react-theme": "^0.15.0",
-    "@react-aria/focus": "3.5.0",
+    "@react-aria/focus": "3.8.0",
     "choices.js": "^9.0.1"
   },
   "devDependencies": {
@@ -34,25 +34,26 @@
     "@okta/odyssey-postcss-scss": "^0.15.0",
     "@okta/odyssey-stylelint": "^0.15.0",
     "@okta/odyssey-typescript": "^0.15.0",
-    "@testing-library/dom": "^7.28.1",
-    "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/dom": "^8.18.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest-axe": "^3.5.1",
     "@types/react": "^17.0.30",
     "@types/react-dom": "^17.0.5",
     "babel-jest": "^26.6.3",
     "chokidar": "^3.4.0",
     "eslint": "^7.27.0",
-    "jest": "^26.6.3",
+    "jest": "^29.0.3",
     "jest-axe": "^5.0.1",
+    "jest-environment-jsdom": "^29.0.3",
     "postcss": "^8.3.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "regenerator-runtime": "^0.13.7",
     "stylelint": "^13.13.1",
-    "typescript": "^4.4.4"
+    "typescript": "^4.8.3"
   },
   "peerDependencies": {
     "react": ">=16 <18",

diff --git a/packages/odyssey-react/src/components/Modal/Modal.test.tsx b/packages/odyssey-react/src/components/Modal/Modal.test.tsx
@@ -150,25 +150,27 @@ describe("Modal", () => {
 
   it("should initially focus on modal's dismiss icon when opened", async () => {
     render(<FocusWrapper />);
-    const dismissIcon = screen.getByTitle(message).closest("button");
     screen.getByText(callToAction).click();
     await waitFor(() => {
-      expect(document.activeElement).toBe(dismissIcon);
+      const closeButton = screen.getByRole("button", { name: message });
+      expect(closeButton).toHaveFocus();
     });
   });
 
   it("should restore focus to original focused element when modal is closed", async () => {
     render(<FocusWrapper />);
     const openButton = screen.getByText(callToAction);
-    const closeButton = screen.getByTitle(message).closest("button");
     openButton.focus();
     openButton.click();
     await waitFor(() => {
-      expect(screen.getByText(modalHeading)).toBeVisible();
+      expect(screen.getByRole("dialog")).toBeVisible();
     });
+    const closeButton = screen.getByRole("button", { name: message });
+    expect(closeButton).toBeVisible();
     closeButton?.click();
     await waitFor(() => {
-      expect(document.activeElement).toBe(openButton);
+      expect(closeButton).not.toBeVisible();
+      expect(openButton).toHaveFocus();
     });
   });
 

diff --git a/packages/odyssey-react/src/components/Modal/Modal.tsx b/packages/odyssey-react/src/components/Modal/Modal.tsx
@@ -10,15 +10,20 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import React, { createContext, useContext, useMemo, useRef } from "react";
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+} from "react";
 import type {
   FunctionComponent,
   ReactElement,
   ReactNode,
   ReactText,
 } from "react";
 import { createPortal } from "react-dom";
-import { FocusScope } from "@react-aria/focus";
 import { withTheme } from "@okta/odyssey-react-theme";
 
 import { Box } from "../Box";
@@ -122,15 +127,18 @@ export const Modal = withTheme(
     const oid = useOid(id);
     const modalDialog = useRef<HTMLDivElement>(null);
     const componentClass = useCx(styles.root, { [styles.openState]: open });
+
     const { restoreFocus, setFocus } = useFocus();
     const lastFocusedElemRef = useRef<OptionalHTMLElement>(null);
 
-    if (open) {
-      lastFocusedElemRef.current = setFocus(modalDialog.current);
-      onOpen && onOpen();
-    } else {
-      lastFocusedElemRef.current && restoreFocus(lastFocusedElemRef.current);
-    }
+    useEffect(() => {
+      if (open) {
+        lastFocusedElemRef.current = setFocus(modalDialog.current);
+        onOpen?.();
+      } else {
+        lastFocusedElemRef.current && restoreFocus(lastFocusedElemRef.current);
+      }
+    }, [onOpen, open, restoreFocus, setFocus]);
 
     return createPortal(
       <ModalContext.Provider value={context}>
@@ -142,17 +150,15 @@ export const Modal = withTheme(
           hidden={!open}
         >
           <div className={styles.overlay} tabIndex={-1}>
-            <FocusScope contain>
-              <div
-                className={styles.dialog}
-                role="dialog"
-                aria-modal="true"
-                aria-labelledby={modalHeadingId}
-                ref={modalDialog}
-              >
-                {children}
-              </div>
-            </FocusScope>
+            <div
+              className={styles.dialog}
+              role="dialog"
+              aria-modal="true"
+              aria-labelledby={modalHeadingId}
+              ref={modalDialog}
+            >
+              {children}
+            </div>
           </div>
         </Box>
       </ModalContext.Provider>,

diff --git a/packages/odyssey-react/src/components/Select/Select.test.tsx b/packages/odyssey-react/src/components/Select/Select.test.tsx
@@ -144,7 +144,7 @@ describe("Select", () => {
     />;
   });
 
-  it("Composer can use choices ref from dom", async () => {
+  it("Composer can use choices ref from dom", () => {
     let selectRef = null as ChoicesHTMLSelectElement | null;
 
     const RefTree = ({