chore(test): update testing libraries and refactor (#3886)

Author: ryo-manba

apps/docs/components/sandpack/entries.ts

@@ -10,7 +10,7 @@ ReactDOM.createRoot(document.getElementById("root")).render(
     <NextUIProvider>
       <div className="w-screen h-screen p-8 flex items-start justify-center">
         <App />
-      </div>  
+      </div>
     </NextUIProvider>
   </React.StrictMode>
 );`;

jest.config.js

@@ -18,7 +18,7 @@ module.exports = {
     ],
   },
   transformIgnorePatterns: ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"],
-  setupFilesAfterEnv: ["@testing-library/jest-dom/extend-expect", "./scripts/setup-test.ts"],
+  setupFilesAfterEnv: ["@testing-library/jest-dom", "./scripts/setup-test.ts"],
   globals: {
     "ts-jest": {
       tsconfig: "tsconfig.json",

package.json

@@ -73,17 +73,15 @@
     "@swc-node/jest": "^1.5.2",
     "@swc/core": "^1.3.35",
     "@swc/jest": "^0.2.24",
-    "@testing-library/dom": "^8.1.0",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^28.1.1",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.13",
     "@types/node": "^15.12.4",
     "@types/react": "^18.0.1",
     "@types/react-dom": "^18.0.0",
     "@types/shelljs": "^0.8.9",
-    "@types/testing-library__jest-dom": "5.14.5",
     "@typescript-eslint/eslint-plugin": "^5.42.0",
     "@typescript-eslint/parser": "^5.42.0",
     "chalk": "^4.1.2",
@@ -115,8 +113,8 @@
     "gray-matter": "^4.0.3",
     "husky": "^8.0.1",
     "intl-messageformat": "^10.1.0",
-    "jest": "^28.1.1",
-    "jest-environment-jsdom": "^28.1.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^28.1.3",
     "jest-watch-typeahead": "1.1.0",
     "lint-staged": "^13.0.3",
     "npm-check-updates": "^16.10.18",

packages/components/accordion/__tests__/accordion.test.tsx

@@ -30,7 +30,7 @@ describe("Accordion", () => {
 
     expect(() => wrapper.unmount()).not.toThrow();
 
-    expect(spy).toBeCalledTimes(0);
+    expect(spy).toHaveBeenCalledTimes(0);
   });
 
   it("ref should be forwarded", () => {
@@ -121,9 +121,7 @@ describe("Accordion", () => {
 
     expect(button).toHaveAttribute("aria-expanded", "false");
 
-    await act(async () => {
-      await user.click(button);
-    });
+    await user.click(button);
 
     expect(button).toHaveAttribute("aria-expanded", "true");
   });
@@ -163,18 +161,12 @@ describe("Accordion", () => {
     const second = wrapper.getByTestId("item-2");
     const secondButton = second.querySelector("button") as HTMLElement;
 
-    act(() => {
-      focus(firstButton);
-    });
-
-    await act(async () => {
-      await user.keyboard("[ArrowDown]");
-    });
+    await focus(firstButton);
+    await user.keyboard("[ArrowDown]");
     expect(secondButton).toHaveFocus();
 
-    await act(async () => {
-      await user.keyboard("[ArrowUp]");
-    });
+    await user.keyboard("[ArrowUp]");
+
     expect(firstButton).toHaveFocus();
   });
 
@@ -200,14 +192,10 @@ describe("Accordion", () => {
       focus(secondButton);
     });
 
-    await act(async () => {
-      await user.keyboard("[Home]");
-    });
+    await user.keyboard("[Home]");
     expect(firstButton).toHaveFocus();
 
-    await act(async () => {
-      await user.keyboard("[End]");
-    });
+    await user.keyboard("[End]");
     expect(secondButton).toHaveFocus();
   });
 
@@ -233,9 +221,7 @@ describe("Accordion", () => {
       focus(firstButton);
     });
 
-    await act(async () => {
-      await user.keyboard("[Tab]");
-    });
+    await user.keyboard("[Tab]");
     expect(secondButton).toHaveFocus();
   });
 
@@ -276,10 +262,7 @@ describe("Accordion", () => {
 
     expect(button).toHaveAttribute("aria-expanded", "false");
 
-    await act(async () => {
-      await user.click(button);
-    });
-
+    await user.click(button);
     expect(button).toHaveAttribute("aria-expanded", "true");
   });
 
@@ -300,17 +283,11 @@ describe("Accordion", () => {
 
     expect(item1.querySelector("[role='region']")).toBeInTheDocument();
 
-    await act(async () => {
-      await user.click(button);
-    });
-
+    await user.click(button);
     const item2 = wrapper.getByTestId("item-2");
     const button2 = item2.querySelector("button") as HTMLElement;
 
-    await act(async () => {
-      await user.click(button2);
-    });
-
+    await user.click(button2);
     expect(item1.querySelector("[role='region']")).toBeInTheDocument();
     expect(item2.querySelector("[role='region']")).toBeInTheDocument();
   });
@@ -331,29 +308,22 @@ describe("Accordion", () => {
 
     const firstButton = await wrapper.getByRole("button", {name: "Accordion Item 1"});
 
-    await act(() => {
+    act(() => {
       focus(firstButton);
     });
-    await act(async () => {
-      await user.keyboard("[Tab]");
-    });
+
+    await user.keyboard("[Tab]");
     expect(input).toHaveFocus();
 
-    await act(async () => {
-      await user.keyboard("aaa");
-    });
+    await user.keyboard("aaa");
     expect(input).toHaveValue("aaa");
 
-    await act(async () => {
-      await user.keyboard("[ArrowLeft]");
-      await user.keyboard("b");
-    });
+    await user.keyboard("[ArrowLeft]");
+    await user.keyboard("b");
     expect(input).toHaveValue("aaba");
 
-    await act(async () => {
-      await user.keyboard("[ArrowRight]");
-      await user.keyboard("c");
-    });
+    await user.keyboard("[ArrowRight]");
+    await user.keyboard("c");
     expect(input).toHaveValue("aabac");
   });