Update dependencies and replace deprecated act method in tests (PR #5760

)

# Description

Update dependencies and move act method to React.

changelogs/unreleased/update-dependencies.yml

@@ -0,0 +1,4 @@
+description: "Update dependencies and replace deprecated act method in tests"
+change-type: patch
+destination-branches: [master, iso7]
+

cypress/e2e/scenario-8-instance-composer.cy.js

@@ -212,7 +212,7 @@ if (Cypress.env("edition") === "iso") {
       cy.get(".canvas").should("be.visible");
       cy.get('[data-type="app.ServiceEntityBlock"]').should("be.visible");
       cy.get('[joint-selector="headerLabel"]')
-        .contains("embedded-entity-")
+        .contains("embedded-")
         .should("exist");
       cy.get('[joint-selector="headerLabel"]')
         .contains("ro_meta")

package.json

@@ -50,8 +50,8 @@
   ],
   "type": "module",
   "devDependencies": {
-    "@babel/core": "^7.24.4",
-    "@babel/plugin-transform-typescript": "^7.23.6",
+    "@babel/core": "^7.24.5",
+    "@babel/plugin-transform-typescript": "^7.24.5",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^15.0.7",
@@ -62,15 +62,15 @@
     "@types/jest": "^29.5.12",
     "@types/jest-axe": "^3.5.9",
     "@types/json-bigint": "^1.0.3",
-    "@types/loadable__component": "^5",
+    "@types/loadable__component": "^5.13.9",
     "@types/lodash": "^4.17.4",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.11.5",
-    "@types/qs": "^6.9.11",
+    "@types/node": "^20.12.12",
+    "@types/qs": "^6.9.15",
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-syntax-highlighter": "^15.5.10",
-    "@types/react-test-renderer": "^18",
+    "@types/react-test-renderer": "^18.3.0",
     "@types/styled-components": "^5.1.26",
     "@types/uuid": "^9",
     "@types/webpack": "^5.28.5",
@@ -103,7 +103,7 @@
     "imagemin": "^8.0.1",
     "jest": "^29.7.0",
     "jest-axe": "^8.0.0",
-    "jest-environment-jsdom": "^29.6.4",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
     "jest-junit": "^16.0.0",
     "lint-staged": "^15.2.0",
@@ -122,7 +122,7 @@
     "rimraf": "^5.0.5",
     "style-loader": "^4.0.0",
     "svg-url-loader": "^8.0.0",
-    "ts-jest": "^29.1.1",
+    "ts-jest": "^29.1.3",
     "ts-loader": "^9.5.1",
     "ts-prune": "^0.10.3",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
@@ -182,7 +182,6 @@
   "resolutions": {
     "json5": "^2.2.2",
     "terser-webpack-plugin": "^1.4.5",
-    "@types/react": "^18.0.21",
     "prismjs": "^1.25.0",
     "trim": "^0.0.3",
     "glob-parent": "^5.1.2",

src/Data/Managers/GetInstanceResources/QueryManager.test.tsx

@@ -1,5 +1,5 @@
-import React, { useContext } from "react";
-import { act, render, screen } from "@testing-library/react";
+import React, { useContext, act } from "react";
+import { render, screen } from "@testing-library/react";
 import { StoreProvider } from "easy-peasy";
 import { Either, PageSize, RemoteData } from "@/Core";
 import { initialCurrentPage } from "@/Data/Common/UrlState/useUrlStateWithCurrentPage";

src/Data/Managers/Helpers/QueryManager/ContinuousWithEnv.test.tsx

@@ -1,6 +1,6 @@
-import React, { useContext } from "react";
+import React, { useContext, act } from "react";
 import { MemoryRouter, useLocation, useNavigate } from "react-router-dom";
-import { act, render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import { StoreProvider } from "easy-peasy";
 import { Either, RemoteData } from "@/Core";

src/Data/Managers/ServiceInstances/QueryManager.test.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { act } from "react";
 import { MemoryRouter } from "react-router-dom";
-import { act, render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import { StoreProvider } from "easy-peasy";
 import {

src/Slices/AgentProcess/UI/Page.test.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { act } from "react";
 import { MemoryRouter } from "react-router-dom";
-import { act, render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import { StoreProvider } from "easy-peasy";
 import { configureAxe, toHaveNoViolations } from "jest-axe";
 import { Either } from "@/Core";

src/Slices/Agents/UI/Agents.test.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { act } from "react";
 import { MemoryRouter } from "react-router-dom";
-import { act, render, screen, within } from "@testing-library/react";
+import { render, screen, within } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import { StoreProvider } from "easy-peasy";
 import { configureAxe, toHaveNoViolations } from "jest-axe";

src/Slices/CompileDetails/UI/CompileDetails.test.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { act } from "react";
 import { MemoryRouter } from "react-router-dom";
-import { act, render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import { StoreProvider } from "easy-peasy";
 import { configureAxe, toHaveNoViolations } from "jest-axe";
 import { Either } from "@/Core";

src/Slices/CompileReports/UI/Page.test.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { act } from "react";
 import { MemoryRouter } from "react-router-dom";
-import { act, render, screen, within } from "@testing-library/react";
+import { render, screen, within } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import { StoreProvider } from "easy-peasy";
 import { configureAxe, toHaveNoViolations } from "jest-axe";

src/Slices/ComplianceCheck/UI/Page.test.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { act, render, screen } from "@testing-library/react";
+import React, { act } from "react";
+import { render, screen } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import { StoreProvider } from "easy-peasy";
 import { configureAxe, toHaveNoViolations } from "jest-axe";

src/Slices/CreateEnvironment/UI/CreateEnvironmentForm.test.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { act } from "react";
 import { MemoryRouter } from "react-router";
-import { act, render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import { StoreProvider } from "easy-peasy";
 import { configureAxe, toHaveNoViolations } from "jest-axe";

src/Slices/CreateInstance/UI/CreateInstance.test.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { act } from "react";
 import { MemoryRouter } from "react-router-dom";
-import { render, screen, act, within } from "@testing-library/react";
+import { render, screen, within } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import { StoreProvider } from "easy-peasy";
 import { configureAxe, toHaveNoViolations } from "jest-axe";

src/Slices/Dashboard/UI/GraphCard.test.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { act, render, screen } from "@testing-library/react";
+import React, { act } from "react";
+import { render, screen } from "@testing-library/react";
 import { configureAxe, toHaveNoViolations } from "jest-axe";
 import { words } from "@/UI";
 import { MetricName } from "../Core/Domain";

src/Slices/Dashboard/UI/Page.test.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { act } from "react";
 import { MemoryRouter } from "react-router";
-import { act, render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import { StoreProvider } from "easy-peasy";
 import { configureAxe, toHaveNoViolations } from "jest-axe";
 import { Either } from "@/Core";

src/Slices/DesiredState/UI/Page.test.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { act } from "react";
 import { MemoryRouter } from "react-router-dom";
-import { act, render, screen, within } from "@testing-library/react";
+import { render, screen, within } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import { StoreProvider } from "easy-peasy";
 import { configureAxe, toHaveNoViolations } from "jest-axe";

src/Slices/DesiredStateCompare/UI/Page.test.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { act, render, screen, within } from "@testing-library/react";
+import React, { act } from "react";
+import { render, screen, within } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import { StoreProvider } from "easy-peasy";
 import { configureAxe, toHaveNoViolations } from "jest-axe";

src/Slices/DesiredStateDetails/UI/Page.test.tsx

@@ -1,9 +1,8 @@
-import React from "react";
+import React, { act } from "react";
 import { MemoryRouter } from "react-router-dom";
 import { render, screen } from "@testing-library/react";
 import { StoreProvider } from "easy-peasy";
 import { configureAxe, toHaveNoViolations } from "jest-axe";
-import { act } from "react-dom/test-utils";
 import { Either } from "@/Core";
 import { getStoreInstance, QueryResolverImpl } from "@/Data";
 import {

src/Slices/DesiredStateResourceDetails/UI/DetailsProvider.test.tsx

@@ -1,9 +1,8 @@
-import React from "react";
+import React, { act } from "react";
 import { MemoryRouter } from "react-router-dom";
 import { render, screen } from "@testing-library/react";
 import { StoreProvider } from "easy-peasy";
 import { configureAxe, toHaveNoViolations } from "jest-axe";
-import { act } from "react-dom/test-utils";
 import { Either } from "@/Core";
 import {
   getStoreInstance,

src/Slices/Diagnose/UI/Diagnose.test.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { act } from "react";
 import { MemoryRouter } from "react-router-dom";
-import { act, render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import { StoreProvider } from "easy-peasy";
 import { configureAxe, toHaveNoViolations } from "jest-axe";
 import { Either } from "@/Core";

src/Slices/DuplicateInstance/UI/DuplicateInstancePage.test.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { act } from "react";
 import { MemoryRouter } from "react-router-dom";
-import { act, render, screen, within } from "@testing-library/react";
+import { render, screen, within } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import { StoreProvider } from "easy-peasy";
 import { configureAxe, toHaveNoViolations } from "jest-axe";

src/Slices/EditInstance/UI/EditInstancePage.test.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { act } from "react";
 import { MemoryRouter } from "react-router-dom";
-import { act, render, screen, within } from "@testing-library/react";
+import { render, screen, within } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import { StoreProvider } from "easy-peasy";
 import { configureAxe, toHaveNoViolations } from "jest-axe";

src/Slices/Events/UI/Events.test.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { act } from "react";
 import { MemoryRouter } from "react-router";
-import { act, render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import { StoreProvider } from "easy-peasy";
 import { configureAxe, toHaveNoViolations } from "jest-axe";
 import { Either, InstanceEvent } from "@/Core";

src/Slices/Events/UI/Spec/EventsPageIntegration.test.ts → src/Slices/Events/UI/Spec/EventsPageIntegration.test.tsx

@@ -1,4 +1,5 @@
-import { render, screen, act, within } from "@testing-library/react";
+import { act } from "react";
+import { render, screen, within } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import { Either } from "@/Core";
 import { Service, Pagination } from "@/Test";
@@ -89,6 +90,7 @@ describe("Given the Events Page", () => {
       expect(rowsAfter).toHaveLength(3);
     },
   );
+
   it("When using the Date filter then the events with from and to the events in the range should be fetched and shown", async () => {
     const { component, apiHelper } = new EventsPageComposer().compose(
       Service.a,
@@ -247,7 +249,9 @@ describe("Given the Events Page", () => {
 
       // The chips are hidden in small windows, so resize it
       window = Object.assign(window, { innerWidth: 1200 });
-      window.dispatchEvent(new Event("resize"));
+      await act(async () => {
+        window.dispatchEvent(new Event("resize"));
+      });
 
       expect(await screen.findByText(chip, { exact: false })).toBeVisible();
       await act(async () => {

src/Slices/Facts/UI/Page.test.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { act } from "react";
 import { MemoryRouter } from "react-router-dom";
-import { act, render, screen, within } from "@testing-library/react";
+import { render, screen, within } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import { StoreProvider } from "easy-peasy";
 import { axe, toHaveNoViolations } from "jest-axe";

src/Slices/Home/UI/EnvironmentsOverview.test.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { act } from "react";
 import { MemoryRouter } from "react-router-dom";
-import { act, render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import { dependencies, Environment } from "@/Test";
 import { words } from "@/UI";

src/Slices/Home/UI/Page.test.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { act } from "react";
 import { MemoryRouter } from "react-router";
-import { act, render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import { StoreProvider } from "easy-peasy";
 import { configureAxe, toHaveNoViolations } from "jest-axe";
 import { Either } from "@/Core";

src/Slices/Login/Page.test.tsx

@@ -1,7 +1,7 @@
-import React from "react";
+import React, { act } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { screen } from "@testing-library/dom";
-import { act, render, waitFor } from "@testing-library/react";
+import { render, waitFor } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import { axe, toHaveNoViolations } from "jest-axe";
 import { HttpResponse, http } from "msw";

src/Slices/Notification/UI/Badge/Badge.test.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { act, render, screen } from "@testing-library/react";
+import React, { act } from "react";
+import { render, screen } from "@testing-library/react";
 import { StoreProvider } from "easy-peasy";
 import { Either } from "@/Core";
 import {

src/Slices/Notification/UI/Center/Page.test.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { act } from "react";
 import { MemoryRouter } from "react-router-dom";
-import { act, render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import { StoreProvider } from "easy-peasy";
 import { axe, toHaveNoViolations } from "jest-axe";

src/Slices/Notification/UI/Drawer/Drawer.test.tsx

@@ -1,7 +1,7 @@
-import React from "react";
+import React, { act } from "react";
 import { Router } from "react-router-dom";
 import { Masthead, Page } from "@patternfly/react-core";
-import { act, render, screen, within } from "@testing-library/react";
+import { render, screen, within } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import { StoreProvider } from "easy-peasy";
 import { createMemoryHistory } from "history";

src/Slices/OrderDetails/UI/Page.test.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { act, render, screen } from "@testing-library/react";
+import React, { act } from "react";
+import { render, screen } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import { axe, toHaveNoViolations } from "jest-axe";
 import { Either } from "@/Core";

src/Slices/Orders/UI/Page.test.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { act, render, screen } from "@testing-library/react";
+import React, { act } from "react";
+import { render, screen } from "@testing-library/react";
 import { axe, toHaveNoViolations } from "jest-axe";
 import { Either } from "@/Core";
 import { baseSetup } from "@/Test/Utils/base-setup";

src/Slices/Parameters/UI/Page.test.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { act } from "react";
 import { MemoryRouter } from "react-router-dom";
-import { act, render, screen, within } from "@testing-library/react";
+import { render, screen, within } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import { StoreProvider } from "easy-peasy";
 import { axe, toHaveNoViolations } from "jest-axe";

src/Slices/Resource/UI/ResourcesPage/Components/DeployStateFilter.test.tsx

@@ -1,6 +1,6 @@
-import React, { useState } from "react";
+import React, { useState, act } from "react";
 import { Toolbar, ToolbarContent, ToolbarItem } from "@patternfly/react-core";
-import { act, fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { Resource } from "@/Core";
 import { DeployStateFilter } from "./DeployStateFilter";
 

src/Slices/Resource/UI/ResourcesPage/Page.test.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { act } from "react";
 import { MemoryRouter } from "react-router-dom";
-import { act, render, screen, within } from "@testing-library/react";
+import { render, screen, within } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import { StoreProvider } from "easy-peasy";
 import { configureAxe, toHaveNoViolations } from "jest-axe";

src/Slices/ResourceDetails/UI/Tabs/HistoryTab/ResourceHistoryView.test.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { act } from "react";
 import { MemoryRouter } from "react-router";
-import { act, render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import { StoreProvider } from "easy-peasy";
 import { Either, RemoteData } from "@/Core";