#234 Upgrade Vitest libraries to latest version (#235)

Author: nevendyulgerov

apps/web/package.json

@@ -11,6 +11,7 @@
         "lint": "next lint",
         "test": "vitest run",
         "test:watch": "vitest",
+        "test:ui": "vitest --ui",
         "test:ci": "vitest run --coverage",
         "test:e2e": "playwright test",
         "test:e2e:ui": "playwright test --ui"
@@ -64,25 +65,27 @@
         "@graphql-typed-document-node/core": "^3",
         "@playwright/test": "^1.43.1",
         "@sunodo/wagmi-plugin-hardhat-deploy": "^0.2",
-        "@testing-library/jest-dom": "^6.4.8",
+        "@testing-library/jest-dom": "^6.5.0",
         "@testing-library/react": "^16.0.0",
         "@types/node": "^20",
         "@types/ramda": "^0.30.1",
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
-        "@vitejs/plugin-react": "^4.1.0",
-        "@vitest/coverage-v8": "0.34.2",
+        "@vitejs/plugin-react": "^4.3.1",
+        "@vitest/coverage-v8": "^2.0.5",
+        "@vitest/ui": "^2.0.5",
         "@wagmi/cli": "^2",
         "dotenv-cli": "7.3.0",
         "eslint": "^8",
         "eslint-config-cartesi": "*",
+        "happy-dom": "^15.0.0",
         "jsdom": "22.1.0",
         "npm-run-all": "^4",
         "postcss": "^8",
         "postcss-preset-mantine": "^1.12.3",
         "postcss-simple-vars": "^7",
         "ts-node": "^10",
         "typescript": "^5",
-        "vitest": "0.34.2"
+        "vitest": "^2.0.5"
     }
 }

apps/web/test/components/connection/connectionForm.test.tsx

@@ -58,7 +58,7 @@ describe("connectionForm", () => {
         ).toBeInTheDocument();
 
         expect(screen.getByTestId("icon-test-inactive")).toBeInTheDocument();
-        expect(screen.getByText("Save")).toBeInTheDocument();
+        expect(screen.getByTestId("connection-save")).toBeInTheDocument();
     });
 
     it("should present a list of applications suggestions when click on address input", () => {
@@ -229,7 +229,7 @@ describe("connectionForm", () => {
 
         render(<AppConnectionFormE />);
 
-        fireEvent.click(screen.getByText("Save"));
+        fireEvent.click(screen.getByTestId("connection-save"));
 
         expect(
             screen.getByText("Address is a required field!"),
@@ -277,7 +277,7 @@ describe("connectionForm", () => {
             screen.getByText("This application responded with"),
         ).toBeInTheDocument();
 
-        fireEvent.click(screen.getByText("Save"));
+        fireEvent.click(screen.getByTestId("connection-save"));
 
         expect(addConnection).toHaveBeenCalledWith(
             { address, url },
@@ -324,7 +324,7 @@ describe("connectionForm", () => {
             screen.getByText("This application responded with"),
         ).toBeInTheDocument();
 
-        fireEvent.click(screen.getByText("Save"));
+        fireEvent.click(screen.getByTestId("connection-save"));
 
         expect(addConnection).toHaveBeenCalledWith(
             { address, url },
@@ -371,7 +371,7 @@ describe("connectionForm", () => {
             screen.getByText("This application responded with"),
         ).toBeInTheDocument();
 
-        fireEvent.click(screen.getByText("Save"));
+        fireEvent.click(screen.getByTestId("connection-save"));
 
         expect(addConnection).toHaveBeenCalledTimes(0);
     });
@@ -407,7 +407,7 @@ describe("connectionForm", () => {
             target: { value: url },
         });
 
-        fireEvent.click(screen.getByText("Save"));
+        fireEvent.click(screen.getByTestId("connection-save"));
 
         expect(addConnection).not.toHaveBeenCalled();
         expect(notificationsMock.show).toHaveBeenCalledWith({

apps/web/test/components/inputs/inputDetailsView.test.tsx

@@ -94,15 +94,19 @@ describe("Input details view component", () => {
     it("should try to parse the inputs payload As Text", () => {
         render(<View input={inputSample} />);
 
-        fireEvent.click(screen.getByText("As Text"));
+        fireEvent.click(
+            screen.getByText("As Text").parentNode as HTMLLabelElement,
+        );
 
         expect(screen.getByDisplayValue("joinGame")).toBeInTheDocument();
     });
 
     it("should try to parse the inputs payload As JSON", () => {
         render(<View input={inputSample} />);
 
-        fireEvent.click(screen.getByText("As JSON"));
+        fireEvent.click(
+            screen.getByText("As JSON").parentNode as HTMLLabelElement,
+        );
 
         expect(screen.getByDisplayValue("joinGame")).toBeInTheDocument();
     });
@@ -196,7 +200,10 @@ describe("Input details view component", () => {
 
             const reportsPanel = screen.getByTestId("panel-reports");
 
-            fireEvent.click(getByText(reportsPanel, "As Text"));
+            fireEvent.click(
+                getByText(reportsPanel, "As Text")
+                    .parentNode as HTMLLabelElement,
+            );
 
             expect(screen.getByDisplayValue("Qh4+")).toBeVisible();
         });