Upgrade vite and vitest

HorusGoul · Dec 13, 2024 · ce82b0e · ce82b0e
1 parent 93947cc
commit ce82b0e
Show file tree

Hide file tree

Showing 36 changed files with 2,473 additions and 1,676 deletions.
diff --git a/apps/pwa/package.json b/apps/pwa/package.json
@@ -38,11 +38,11 @@
     "zustand": "^4.3.2"
   },
   "devDependencies": {
-    "@testing-library/dom": "^7.30.3",
-    "@testing-library/jest-dom": "^5.11.10",
-    "@testing-library/react": "^11.2.6",
-    "@testing-library/react-hooks": "^5.1.1",
-    "@testing-library/user-event": "^13.1.1",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/animejs": "^3.1.3",
     "@types/body-scroll-lock": "^2.6.1",
     "@types/classnames": "^2.2.11",
@@ -51,10 +51,10 @@
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@types/react-helmet": "^6.1.0",
-    "@types/testing-library__jest-dom": "^5.14.5",
-    "@vitejs/plugin-legacy": "^3.0.1",
-    "@vitejs/plugin-react": "^3.0.1",
-    "@vitest/coverage-istanbul": "^0.28.1",
+    "@types/testing-library__jest-dom": "^6.0.0",
+    "@vitejs/plugin-legacy": "6.0.0",
+    "@vitejs/plugin-react": "4.3.4",
+    "@vitest/coverage-istanbul": "2.1.8",
     "eslint": "^8.44.0",
     "@internal/eslint-config": "workspace:*",
     "jest-useragent-mock": "^0.1.1",
@@ -65,13 +65,13 @@
     "nyc": "^15.1.0",
     "prettier": "^2.2.1",
     "rimraf": "^3.0.2",
-    "sass": "^1.32.8",
+    "sass": "1.83.0",
     "typescript": "^4.9.4",
     "@internal/tsconfig": "workspace:*",
-    "vite": "4.0.4",
-    "vite-plugin-istanbul": "^4.0.0",
-    "vite-plugin-svgr": "^2.4.0",
-    "vitest": "^0.28.1",
+    "vite": "6.0.3",
+    "vite-plugin-istanbul": "6.0.2",
+    "vite-plugin-svgr": "4.3.0",
+    "vitest": "2.1.8",
     "workbox-cli": "^6.1.0"
   },
   "resolutions": {

diff --git a/apps/pwa/src/app.d.ts b/apps/pwa/src/app.d.ts
@@ -7,9 +7,3 @@ interface Window {
   };
   __DEBUG__?: boolean;
 }
-
-declare module "*.svg" {
-  export const ReactComponent: React.ComponentType<
-    React.SVGAttributes<SVGElement>
-  >;
-}
diff --git a/apps/pwa/src/components/about/About.test.tsx b/apps/pwa/src/components/about/About.test.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import About from "./About";
 import { render } from "@/test-utils";
 
@@ -74,7 +74,7 @@ test("should validate Report bug link", () => {
   );
 });
 
-test("should invoke onNavbarBackButtonClick", () => {
+test("should invoke onNavbarBackButtonClick", async () => {
   const { container, route } = render(
     <>
       <About />
@@ -88,6 +88,6 @@ test("should invoke onNavbarBackButtonClick", () => {
     ".navbar__back-button"
   ) as HTMLAnchorElement;
 
-  userEvent.click(navButton);
+  await userEvent.click(navButton);
   expect(route.location.pathname).toBe("/");
 });
diff --git a/apps/pwa/src/components/download-app/DownloadApp.test.tsx b/apps/pwa/src/components/download-app/DownloadApp.test.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { render, screen, waitFor } from "@testing-library/react";
 import DownloadApp, { DownloadAppConfig } from "./DownloadApp";
 import { useFlagStore } from "@/services/flags";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import "hammerjs";
 import { clear, mockUserAgent } from "jest-useragent-mock";
 import { useLocalStorageCacheStore } from "@/hooks/useLocalStorage";

diff --git a/apps/pwa/src/components/element-picker/ElementPicker.test.tsx b/apps/pwa/src/components/element-picker/ElementPicker.test.tsx
@@ -1,19 +1,19 @@
 import * as React from "react";
 import { screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import ElementPicker from "./ElementPicker";
 import { render } from "@/test-utils";
 
-test("search for Neon", () => {
+test("search for Neon", async () => {
   const onElement = vi.fn();
 
   render(<ElementPicker onElement={onElement} />);
   expect(screen.getByText("Helium")).toBeVisible();
 
-  userEvent.type(screen.getByRole("textbox"), "Neon");
+  await userEvent.type(screen.getByRole("textbox"), "Neon");
   expect(screen.queryByText("Helium")).not.toBeInTheDocument();
 
-  userEvent.click(screen.getByText("Noble gases"));
+  await userEvent.click(screen.getByText("Noble gases"));
 
   expect(onElement).toHaveBeenCalledWith(
     expect.objectContaining({
@@ -22,14 +22,14 @@ test("search for Neon", () => {
   );
 });
 
-test("search for atomic number 118", () => {
+test("search for atomic number 118", async () => {
   const onElement = vi.fn();
 
   render(<ElementPicker onElement={onElement} />);
 
-  userEvent.type(screen.getByRole("textbox"), "118");
+  await userEvent.type(screen.getByRole("textbox"), "118");
 
-  userEvent.click(screen.getByText("Oganesson"));
+  await userEvent.click(screen.getByText("Oganesson"));
 
   expect(onElement).toHaveBeenCalledWith(
     expect.objectContaining({
@@ -43,10 +43,10 @@ test("search for atomic number 25", async () => {
 
   render(<ElementPicker onElement={onElement} />);
 
-  userEvent.type(screen.getByRole("textbox"), "25");
+  await userEvent.type(screen.getByRole("textbox"), "25");
   expect(screen.getByRole("textbox")).toHaveValue("25");
 
-  userEvent.click(await screen.findByText("Manganese"));
+  await userEvent.click(await screen.findByText("Manganese"));
 
   expect(onElement).toHaveBeenCalledWith(
     expect.objectContaining({

diff --git a/apps/pwa/src/components/locale-selector/LocaleSelector.test.tsx b/apps/pwa/src/components/locale-selector/LocaleSelector.test.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { screen } from "@testing-library/react";
 import { render, waitMs } from "@/test-utils";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import LocaleSelector from "./LocaleSelector";
 
 beforeEach(() => {
@@ -14,9 +14,9 @@ test("should be able to change locale", async () => {
 
   expect(screen.getByText(/change language/i)).toBeInTheDocument();
 
-  userEvent.click(screen.getByRole("button"));
+  await userEvent.click(screen.getByRole("button"));
 
-  userEvent.click(
+  await userEvent.click(
     screen.getByRole("button", {
       name: /español/i,
     })

diff --git a/apps/pwa/src/components/mass-calculator/MassCalculator.test.tsx b/apps/pwa/src/components/mass-calculator/MassCalculator.test.tsx
@@ -1,11 +1,11 @@
 import * as React from "react";
 import { screen } from "@testing-library/react";
 import { render } from "@/test-utils";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import MassCalculator from "./MassCalculator";
 import "hammerjs";
 
-test("should render mass calculator", () => {
+test("should render mass calculator", async () => {
   render(<MassCalculator />, {
     initialHistoryEntries: ["/mass-calculator"],
   });
@@ -19,151 +19,151 @@ test("should render mass calculator", () => {
   expect(screen.getByText(/164\.93032 g \/ mol/i)).toBeInTheDocument();
 });
 
-test("should clear elements", () => {
+test("should clear elements", async () => {
   render(<MassCalculator />, {
     initialHistoryEntries: ["/mass-calculator"],
   });
 
-  userEvent.click(screen.getByText(/clear/i));
+  await userEvent.click(screen.getByText(/clear/i));
   expect(screen.getByText(/0 g \/ mol/i)).toBeInTheDocument();
   expect(screen.queryByText(/holmium/i)).not.toBeInTheDocument();
 });
 
-test("should add elements and verify total mass", () => {
+test("should add elements and verify total mass", async () => {
   render(<MassCalculator />, {
     initialHistoryEntries: ["/mass-calculator"],
   });
 
   // clear elements
-  userEvent.click(screen.getByText(/clear/i));
+  await userEvent.click(screen.getByText(/clear/i));
 
   // add element
-  userEvent.click(screen.getByText(/add element/i));
+  await userEvent.click(screen.getByText(/add element/i));
 
   expect(screen.getByRole("textbox")).toBeInTheDocument();
 
-  userEvent.click(screen.getAllByText(/hydrogen/i)[0]);
+  await userEvent.click(screen.getAllByText(/hydrogen/i)[0]);
 
   // adding another element
-  userEvent.click(screen.getByText(/add element/i));
-  userEvent.type(screen.getByRole("textbox"), "oxygen");
+  await userEvent.click(screen.getByText(/add element/i));
+  await userEvent.type(screen.getByRole("textbox"), "oxygen");
 
-  userEvent.click(screen.getAllByText(/oxygen/i)[0]);
+  await userEvent.click(screen.getAllByText(/oxygen/i)[0]);
 
-  userEvent.click(screen.getAllByText(/hydrogen/i)[0]);
-  userEvent.clear(screen.getByDisplayValue("1"));
-  userEvent.type(screen.getByDisplayValue("0"), "2");
+  await userEvent.click(screen.getAllByText(/hydrogen/i)[0]);
+  await userEvent.clear(screen.getByDisplayValue("1"));
+  await userEvent.type(screen.getByDisplayValue("0"), "2");
 
-  userEvent.click(screen.getAllByRole("button")[5]);
+  await userEvent.click(screen.getAllByRole("button")[5]);
 
   //verify total mass of H2O(water)
   expect(screen.getByText(/18\.01528 g \/ mol/i)).toBeInTheDocument();
 });
 
-test("should be able to increase and decrease element amount with icons", () => {
+test("should be able to increase and decrease element amount with icons", async () => {
   render(<MassCalculator />, {
     initialHistoryEntries: ["/mass-calculator"],
   });
 
   // clear elements
-  userEvent.click(screen.getByText(/clear/i));
+  await userEvent.click(screen.getByText(/clear/i));
 
   // add element
-  userEvent.click(screen.getByText(/add element/i));
+  await userEvent.click(screen.getByText(/add element/i));
 
-  userEvent.click(screen.getAllByText(/hydrogen/i)[0]);
+  await userEvent.click(screen.getAllByText(/hydrogen/i)[0]);
 
   // open increase amount modal
-  userEvent.click(screen.getAllByText(/hydrogen/i)[0]);
+  await userEvent.click(screen.getAllByText(/hydrogen/i)[0]);
 
   // verify initial amount of Hydrogen
   expect(screen.getByDisplayValue("1")).toBeInTheDocument();
 
   // Click + icon
-  userEvent.click(screen.getAllByRole("button")[6]);
+  await userEvent.click(screen.getAllByRole("button")[6]);
 
   // Verify amount is increased
   expect(screen.getByDisplayValue("2")).toBeInTheDocument();
 
   // Click - icon
-  userEvent.click(screen.getAllByRole("button")[5]);
+  await userEvent.click(screen.getAllByRole("button")[5]);
 
   expect(screen.getByDisplayValue("1")).toBeInTheDocument();
 });
 
-test("should increase element amount by +1 if user add same element again", () => {
+test("should increase element amount by +1 if user add same element again", async () => {
   render(<MassCalculator />, {
     initialHistoryEntries: ["/mass-calculator"],
   });
 
   // clear elements
-  userEvent.click(screen.getByText(/clear/i));
+  await userEvent.click(screen.getByText(/clear/i));
 
   // add element
-  userEvent.click(screen.getByText(/add element/i));
+  await userEvent.click(screen.getByText(/add element/i));
 
-  userEvent.click(screen.getAllByText(/hydrogen/i)[0]);
+  await userEvent.click(screen.getAllByText(/hydrogen/i)[0]);
 
   // open add element modal again
-  userEvent.click(screen.getByText(/add element/i));
+  await userEvent.click(screen.getByText(/add element/i));
 
   // add hydrogen again
-  userEvent.click(screen.getAllByText(/hydrogen/i)[2]);
+  await userEvent.click(screen.getAllByText(/hydrogen/i)[2]);
 
   // Verify total mass of 2 atoms of Hydrogen
   expect(screen.getByText(/2\.01588 g \/ mol/i)).toBeInTheDocument();
 });
 
-test("should navigate back", () => {
+test("should navigate back", async () => {
   const { route } = render(<MassCalculator />, {
     initialHistoryEntries: ["/mass-calculator"],
   });
 
-  userEvent.click(screen.getAllByRole("button")[0]);
+  await userEvent.click(screen.getAllByRole("button")[0]);
   expect(route.location.pathname).toBe("/");
 });
 
-test("should not allow user to add negative amounts", () => {
+test("should not allow user to add negative amounts", async () => {
   render(<MassCalculator />, {
     initialHistoryEntries: ["/mass-calculator"],
   });
 
   // clear elements
-  userEvent.click(screen.getByText(/clear/i));
+  await userEvent.click(screen.getByText(/clear/i));
 
   // add element
-  userEvent.click(screen.getByText(/add element/i));
+  await userEvent.click(screen.getByText(/add element/i));
 
-  userEvent.click(screen.getAllByText(/hydrogen/i)[0]);
+  await userEvent.click(screen.getAllByText(/hydrogen/i)[0]);
 
   // open increase amount modal
-  userEvent.click(screen.getAllByText(/hydrogen/i)[0]);
+  await userEvent.click(screen.getAllByText(/hydrogen/i)[0]);
 
   // verify initial amount of Hydrogen
   expect(screen.getByDisplayValue("1")).toBeInTheDocument();
 
   // Click - icon
-  userEvent.click(screen.getAllByRole("button")[5]);
+  await userEvent.click(screen.getAllByRole("button")[5]);
 
   expect(screen.getByDisplayValue("0")).toBeInTheDocument();
 
-  userEvent.click(screen.getAllByRole("button")[5]);
+  await userEvent.click(screen.getAllByRole("button")[5]);
 
   // Click again on - icon
   expect(screen.getByDisplayValue("0")).toBeInTheDocument();
 });
 
-test("should be able to close add element modal by clicking on overlay", () => {
+test("should be able to close add element modal by clicking on overlay", async () => {
   render(<MassCalculator />, {
     initialHistoryEntries: ["/mass-calculator"],
   });
 
   // clear elements
-  userEvent.click(screen.getByText(/clear/i));
+  await userEvent.click(screen.getByText(/clear/i));
 
   // add element
-  userEvent.click(screen.getByText(/add element/i));
+  await userEvent.click(screen.getByText(/add element/i));
 
   // close add elements modal by clicking on overlay
-  userEvent.click(screen.getByTestId("overlay"));
+  await userEvent.click(screen.getByTestId("overlay"));
 });