chore: remove all deprecated imports of act (#8398)

don't use `act` from `react-dom`. Instead, use act from `react` directly, as advised by the deprecation notice. This PR fixes all of the deprecated import warnings, updates some testing libraries we use (and tests), and fixes one or two other warnings.
2025-04-10 01:16:39 +02:00 · 2024-10-15 13:53:26 +02:00 · 2024-10-15 13:53:26 +02:00 · abef5deaef
commit abef5deaef
parent 07469a427c
14 changed files with 54 additions and 171 deletions
--- a/frontend/package.json
+++ b/frontend/package.json
@ -46,9 +46,9 @@
    "@mui/material": "5.15.3",
    "@mui/x-date-pickers": "^7.0.0",
    "@tanstack/react-table": "^8.10.7",
-    "@testing-library/dom": "8.20.1",
+    "@testing-library/dom": "10.4.0",
    "@testing-library/jest-dom": "6.5.0",
-    "@testing-library/react": "13.4.0",
+    "@testing-library/react": "16.0.1",
    "@testing-library/user-event": "14.5.2",
    "@types/css-mediaquery": "^0.1.4",
    "@types/debounce": "1.2.4",
--- a/frontend/src/component/admin/apiToken/CreateApiToken/CreateApiToken.test.tsx
+++ b/frontend/src/component/admin/apiToken/CreateApiToken/CreateApiToken.test.tsx
@ -39,9 +39,6 @@ test('Enabled new token button when limits, version and permission allow for it'
        permissions,
    });

-    const button = await screen.findByText('Create token');
-    expect(button).toBeDisabled();
-
    await waitFor(async () => {
        const button = await screen.findByText('Create token');
        expect(button).not.toBeDisabled();
--- a/frontend/src/component/admin/roles/RoleForm/useRoleForm.test.ts
+++ b/frontend/src/component/admin/roles/RoleForm/useRoleForm.test.ts
@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react';
 import { useRoleForm } from './useRoleForm';
-import { act } from 'react-test-renderer';
 import { test } from 'vitest';
+import { act } from 'react';

 describe('trim names and description', () => {
    test('name is trimmed before being set', () => {
--- a/frontend/src/component/common/Sticky/StickyProvider.test.tsx
+++ b/frontend/src/component/common/Sticky/StickyProvider.test.tsx
@ -2,7 +2,7 @@ import { render, cleanup } from '@testing-library/react';
 import { StickyProvider } from './StickyProvider';
 import { type IStickyContext, StickyContext } from './StickyContext';
 import { expect } from 'vitest';
-import { act } from 'react-test-renderer';
+import { act } from 'react';

 const defaultGetBoundingClientRect = {
    width: 0,
--- a/frontend/src/component/common/TimeAgo/TimeAgo.test.tsx
+++ b/frontend/src/component/common/TimeAgo/TimeAgo.test.tsx
@ -1,6 +1,7 @@
 import { vi } from 'vitest';
-import { act, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { TimeAgo } from './TimeAgo';
+import { act } from 'react';

 const h = 3_600_000 as const;
 const min = 60_000 as const;
--- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsModal/VariantForm/VariantOverrides/useOverrides.test.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsModal/VariantForm/VariantOverrides/useOverrides.test.ts
@ -1,5 +1,6 @@
-import { renderHook, act } from '@testing-library/react';
+import { renderHook } from '@testing-library/react';
 import { useOverrides } from './useOverrides';
+import { act } from 'react';

 describe('useOverrides', () => {
    it('should return initial value', () => {
--- a/frontend/src/component/onboarding/flow/ProjectOnboarding.test.tsx
+++ b/frontend/src/component/onboarding/flow/ProjectOnboarding.test.tsx
@ -31,7 +31,9 @@ test('Project can start onboarding', async () => {
            route: `/projects/${projectId}`,
        },
    );
-    await screen.findByText('The project currently holds no feature flags.');
+    await screen.findByText(
+        'The project currently holds no feature flags. Create one to get started.',
+    );
 });

 test('Project can connect SDK', async () => {
--- a/frontend/src/component/onboarding/flow/ProjectOnboarding.tsx
+++ b/frontend/src/component/onboarding/flow/ProjectOnboarding.tsx
@ -120,7 +120,7 @@ export const ProjectOnboarding = ({
 }: IProjectOnboardingProps) => {
    const { project } = useProjectOverview(projectId);
    const isFirstFlagCreated =
-        project.onboardingStatus.status === 'first-flag-created';
+        project.onboardingStatus?.status === 'first-flag-created';

    const closeOnboardingFlow = () => {
        setOnboardingFlow('closed');
@ -145,7 +145,7 @@ export const ProjectOnboarding = ({
            </TitleBox>
            <Actions>
                <ActionBox>
-                    {project.onboardingStatus.status ===
+                    {project.onboardingStatus?.status ===
                    'first-flag-created' ? (
                        <ExistingFlag />
                    ) : (
@ -194,8 +194,8 @@ const CreateFlag = ({ projectId, refetchFeatures }: ICreateFlagProps) => {
                Create a feature flag
            </TitleContainer>
            <Typography>
-                <div>The project currently holds no feature flags.</div>
-                <div>Create one to get started.</div>
+                The project currently holds no feature flags. Create one to get
+                started.
            </Typography>
            <FlagCreationButton
                text='Create flag'
--- a/frontend/src/component/personalDashboard/PersonalDashboard.test.tsx
+++ b/frontend/src/component/personalDashboard/PersonalDashboard.test.tsx
@ -56,6 +56,12 @@ const setupLongRunningProject = () => {
        ],
    });

+    testServerRoute(
+        server,
+        '/api/admin/client-metrics/features/myFlag/raw',
+        [],
+    );
+
    testServerRoute(server, '/api/admin/projects/projectId/features/myFlag', {
        environments: [
            { name: 'development', type: 'development' },
--- a/frontend/src/component/personalDashboard/PersonalDashboard.tsx
+++ b/frontend/src/component/personalDashboard/PersonalDashboard.tsx
@ -115,8 +115,6 @@ export const PersonalDashboard = () => {
    const activeProjectStage =
        personalDashboardProjectDetails?.onboardingStatus.status ?? 'loading';

-    const noProjects = projects.length === 0;
-
    const projectStageRef = useLoading(
        !detailsError && activeProjectStage === 'loading',
    );
@ -197,7 +195,7 @@ export const PersonalDashboard = () => {
                    <MyFlags
                        hasProjects={projects?.length > 0}
                        flagData={
-                            personalDashboard && personalDashboard.flags.length
+                            personalDashboard?.flags.length
                                ? {
                                      state: 'flags' as const,
                                      activeFlag,
--- a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/CreateProjectDialog.test.tsx
+++ b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/CreateProjectDialog.test.tsx
@ -27,11 +27,6 @@ test('Enabled new project button when limits, version and permission allow for i
        permissions: [{ permission: CREATE_PROJECT }],
    });

-    const button = await screen.findByRole('button', {
-        name: 'Create project',
-    });
-    expect(button).toBeDisabled();
-
    await waitFor(async () => {
        const button = await screen.findByRole('button', {
            name: 'Create project',
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/hooks/useOptimisticUpdate.test.ts
+++ b/frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/hooks/useOptimisticUpdate.test.ts
@ -1,5 +1,6 @@
-import { renderHook, act } from '@testing-library/react';
+import { renderHook } from '@testing-library/react';
 import { useOptimisticUpdate } from './useOptimisticUpdate';
+import { act } from 'react';

 describe('useOptimisticUpdate', () => {
    it('should return state, setter, and rollback function', () => {
--- a/frontend/src/component/project/Project/hooks/useProjectForm.test.ts
+++ b/frontend/src/component/project/Project/hooks/useProjectForm.test.ts
@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react';
 import useProjectForm from './useProjectForm';
-import { act } from 'react-test-renderer';
 import { test } from 'vitest';
+import { act } from 'react';

 describe('configuring change requests', () => {
    test('setting project environments removes any change request envs that are not in the new project env list', () => {
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@ -2446,19 +2446,19 @@ __metadata:
  languageName: node
  linkType: hard

-"@testing-library/dom@npm:8.20.1, @testing-library/dom@npm:^8.5.0":
-  version: 8.20.1
-  resolution: "@testing-library/dom@npm:8.20.1"
+"@testing-library/dom@npm:10.4.0":
+  version: 10.4.0
+  resolution: "@testing-library/dom@npm:10.4.0"
  dependencies:
    "@babel/code-frame": "npm:^7.10.4"
    "@babel/runtime": "npm:^7.12.5"
    "@types/aria-query": "npm:^5.0.1"
-    aria-query: "npm:5.1.3"
+    aria-query: "npm:5.3.0"
    chalk: "npm:^4.1.0"
    dom-accessibility-api: "npm:^0.5.9"
    lz-string: "npm:^1.5.0"
    pretty-format: "npm:^27.0.2"
-  checksum: 10c0/614013756706467f2a7f3f693c18377048c210ec809884f0f9be866f7d865d075805ad15f5d100e8a699467fdde09085bf79e23a00ea0a6ab001d9583ef15e5d
+  checksum: 10c0/0352487720ecd433400671e773df0b84b8268fb3fe8e527cdfd7c11b1365b398b4e0eddba6e7e0c85e8d615f48257753283fccec41f6b986fd6c85f15eb5f84f
  languageName: node
  linkType: hard

@ -2477,17 +2477,23 @@ __metadata:
  languageName: node
  linkType: hard

-"@testing-library/react@npm:13.4.0":
-  version: 13.4.0
-  resolution: "@testing-library/react@npm:13.4.0"
+"@testing-library/react@npm:16.0.1":
+  version: 16.0.1
+  resolution: "@testing-library/react@npm:16.0.1"
  dependencies:
    "@babel/runtime": "npm:^7.12.5"
-    "@testing-library/dom": "npm:^8.5.0"
-    "@types/react-dom": "npm:^18.0.0"
  peerDependencies:
+    "@testing-library/dom": ^10.0.0
+    "@types/react": ^18.0.0
+    "@types/react-dom": ^18.0.0
    react: ^18.0.0
    react-dom: ^18.0.0
-  checksum: 10c0/371bf982dd0deb27da004f368b06904353eac0f23f9c08ff0f24443c3f51a6d647009e366034417565d2484c40f1c7eff74413738abf4ec55209da9bd3253b0e
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/67d05dec5ad5a2e6f92b6a3234af785435c7bb62bdbf12f3bfc89c9bca0c871a189e88c4ba023ed4cea504704c87c6ac7e86e24a3962df6c521ae89b62f48ff7
  languageName: node
  linkType: hard

@ -2768,7 +2774,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@types/react-dom@npm:18.3.0, @types/react-dom@npm:^18.0.0":
+"@types/react-dom@npm:18.3.0":
  version: 18.3.0
  resolution: "@types/react-dom@npm:18.3.0"
  dependencies:
@ -3270,16 +3276,7 @@ __metadata:
  languageName: node
  linkType: hard

-"aria-query@npm:5.1.3":
-  version: 5.1.3
-  resolution: "aria-query@npm:5.1.3"
-  dependencies:
-    deep-equal: "npm:^2.0.5"
-  checksum: 10c0/edcbc8044c4663d6f88f785e983e6784f98cb62b4ba1e9dd8d61b725d0203e4cfca38d676aee984c31f354103461102a3d583aa4fbe4fd0a89b679744f4e5faf
-  languageName: node
-  linkType: hard
-
-"aria-query@npm:^5.0.0, aria-query@npm:^5.3.0":
+"aria-query@npm:5.3.0, aria-query@npm:^5.0.0, aria-query@npm:^5.3.0":
  version: 5.3.0
  resolution: "aria-query@npm:5.3.0"
  dependencies:
@ -3288,7 +3285,7 @@ __metadata:
  languageName: node
  linkType: hard

-"array-buffer-byte-length@npm:^1.0.0, array-buffer-byte-length@npm:^1.0.1":
+"array-buffer-byte-length@npm:^1.0.1":
  version: 1.0.1
  resolution: "array-buffer-byte-length@npm:1.0.1"
  dependencies:
@ -4314,32 +4311,6 @@ __metadata:
  languageName: node
  linkType: hard

-"deep-equal@npm:^2.0.5":
-  version: 2.2.3
-  resolution: "deep-equal@npm:2.2.3"
-  dependencies:
-    array-buffer-byte-length: "npm:^1.0.0"
-    call-bind: "npm:^1.0.5"
-    es-get-iterator: "npm:^1.1.3"
-    get-intrinsic: "npm:^1.2.2"
-    is-arguments: "npm:^1.1.1"
-    is-array-buffer: "npm:^3.0.2"
-    is-date-object: "npm:^1.0.5"
-    is-regex: "npm:^1.1.4"
-    is-shared-array-buffer: "npm:^1.0.2"
-    isarray: "npm:^2.0.5"
-    object-is: "npm:^1.1.5"
-    object-keys: "npm:^1.1.1"
-    object.assign: "npm:^4.1.4"
-    regexp.prototype.flags: "npm:^1.5.1"
-    side-channel: "npm:^1.0.4"
-    which-boxed-primitive: "npm:^1.0.2"
-    which-collection: "npm:^1.0.1"
-    which-typed-array: "npm:^1.1.13"
-  checksum: 10c0/a48244f90fa989f63ff5ef0cc6de1e4916b48ea0220a9c89a378561960814794a5800c600254482a2c8fd2e49d6c2e196131dc983976adb024c94a42dfe4949f
-  languageName: node
-  linkType: hard
-
 "deepmerge@npm:^4.3.1":
  version: 4.3.1
  resolution: "deepmerge@npm:4.3.1"
@ -4650,23 +4621,6 @@ __metadata:
  languageName: node
  linkType: hard

-"es-get-iterator@npm:^1.1.3":
-  version: 1.1.3
-  resolution: "es-get-iterator@npm:1.1.3"
-  dependencies:
-    call-bind: "npm:^1.0.2"
-    get-intrinsic: "npm:^1.1.3"
-    has-symbols: "npm:^1.0.3"
-    is-arguments: "npm:^1.1.1"
-    is-map: "npm:^2.0.2"
-    is-set: "npm:^2.0.2"
-    is-string: "npm:^1.0.7"
-    isarray: "npm:^2.0.5"
-    stop-iteration-iterator: "npm:^1.0.0"
-  checksum: 10c0/ebd11effa79851ea75d7f079405f9d0dc185559fd65d986c6afea59a0ff2d46c2ed8675f19f03dce7429d7f6c14ff9aede8d121fbab78d75cfda6a263030bac0
-  languageName: node
-  linkType: hard
-
 "es-object-atoms@npm:^1.0.0":
  version: 1.0.0
  resolution: "es-object-atoms@npm:1.0.0"
@ -5333,7 +5287,7 @@ __metadata:
  languageName: node
  linkType: hard

-"get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.1, get-intrinsic@npm:^1.2.2, get-intrinsic@npm:^1.2.3, get-intrinsic@npm:^1.2.4":
+"get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.1, get-intrinsic@npm:^1.2.3, get-intrinsic@npm:^1.2.4":
  version: 1.2.4
  resolution: "get-intrinsic@npm:1.2.4"
  dependencies:
@ -5774,7 +5728,7 @@ __metadata:
  languageName: node
  linkType: hard

-"internal-slot@npm:^1.0.4, internal-slot@npm:^1.0.7":
+"internal-slot@npm:^1.0.7":
  version: 1.0.7
  resolution: "internal-slot@npm:1.0.7"
  dependencies:
@ -5795,17 +5749,7 @@ __metadata:
  languageName: node
  linkType: hard

-"is-arguments@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "is-arguments@npm:1.1.1"
-  dependencies:
-    call-bind: "npm:^1.0.2"
-    has-tostringtag: "npm:^1.0.0"
-  checksum: 10c0/5ff1f341ee4475350adfc14b2328b38962564b7c2076be2f5bac7bd9b61779efba99b9f844a7b82ba7654adccf8e8eb19d1bb0cc6d1c1a085e498f6793d4328f
-  languageName: node
-  linkType: hard
-
-"is-array-buffer@npm:^3.0.2, is-array-buffer@npm:^3.0.4":
+"is-array-buffer@npm:^3.0.4":
  version: 3.0.4
  resolution: "is-array-buffer@npm:3.0.4"
  dependencies:
@ -5893,7 +5837,7 @@ __metadata:
  languageName: node
  linkType: hard

-"is-date-object@npm:^1.0.1, is-date-object@npm:^1.0.5":
+"is-date-object@npm:^1.0.1":
  version: 1.0.5
  resolution: "is-date-object@npm:1.0.5"
  dependencies:
@ -5956,13 +5900,6 @@ __metadata:
  languageName: node
  linkType: hard

-"is-map@npm:^2.0.2, is-map@npm:^2.0.3":
-  version: 2.0.3
-  resolution: "is-map@npm:2.0.3"
-  checksum: 10c0/2c4d431b74e00fdda7162cd8e4b763d6f6f217edf97d4f8538b94b8702b150610e2c64961340015fe8df5b1fcee33ccd2e9b62619c4a8a3a155f8de6d6d355fc
-  languageName: node
-  linkType: hard
-
 "is-negative-zero@npm:^2.0.3":
  version: 2.0.3
  resolution: "is-negative-zero@npm:2.0.3"
@ -6040,13 +5977,6 @@ __metadata:
  languageName: node
  linkType: hard

-"is-set@npm:^2.0.2, is-set@npm:^2.0.3":
-  version: 2.0.3
-  resolution: "is-set@npm:2.0.3"
-  checksum: 10c0/f73732e13f099b2dc879c2a12341cfc22ccaca8dd504e6edae26484bd5707a35d503fba5b4daad530a9b088ced1ae6c9d8200fd92e09b428fe14ea79ce8080b7
-  languageName: node
-  linkType: hard
-
 "is-shared-array-buffer@npm:^1.0.2, is-shared-array-buffer@npm:^1.0.3":
  version: 1.0.3
  resolution: "is-shared-array-buffer@npm:1.0.3"
@ -6111,13 +6041,6 @@ __metadata:
  languageName: node
  linkType: hard

-"is-weakmap@npm:^2.0.2":
-  version: 2.0.2
-  resolution: "is-weakmap@npm:2.0.2"
-  checksum: 10c0/443c35bb86d5e6cc5929cd9c75a4024bb0fff9586ed50b092f94e700b89c43a33b186b76dbc6d54f3d3d09ece689ab38dcdc1af6a482cbe79c0f2da0a17f1299
-  languageName: node
-  linkType: hard
-
 "is-weakref@npm:^1.0.2":
  version: 1.0.2
  resolution: "is-weakref@npm:1.0.2"
@ -6127,16 +6050,6 @@ __metadata:
  languageName: node
  linkType: hard

-"is-weakset@npm:^2.0.3":
-  version: 2.0.3
-  resolution: "is-weakset@npm:2.0.3"
-  dependencies:
-    call-bind: "npm:^1.0.7"
-    get-intrinsic: "npm:^1.2.4"
-  checksum: 10c0/8ad6141b6a400e7ce7c7442a13928c676d07b1f315ab77d9912920bf5f4170622f43126f111615788f26c3b1871158a6797c862233124507db0bcc33a9537d1a
-  languageName: node
-  linkType: hard
-
 "isarray@npm:^2.0.5":
  version: 2.0.5
  resolution: "isarray@npm:2.0.5"
@ -7559,16 +7472,6 @@ __metadata:
  languageName: node
  linkType: hard

-"object-is@npm:^1.1.5":
-  version: 1.1.6
-  resolution: "object-is@npm:1.1.6"
-  dependencies:
-    call-bind: "npm:^1.0.7"
-    define-properties: "npm:^1.2.1"
-  checksum: 10c0/506af444c4dce7f8e31f34fc549e2fb8152d6b9c4a30c6e62852badd7f520b579c679af433e7a072f9d78eb7808d230dc12e1cf58da9154dfbf8813099ea0fe0
-  languageName: node
-  linkType: hard
-
 "object-keys@npm:^1.1.1":
  version: 1.1.1
  resolution: "object-keys@npm:1.1.1"
@ -7576,7 +7479,7 @@ __metadata:
  languageName: node
  linkType: hard

-"object.assign@npm:^4.1.4, object.assign@npm:^4.1.5":
+"object.assign@npm:^4.1.5":
  version: 4.1.5
  resolution: "object.assign@npm:4.1.5"
  dependencies:
@ -8373,7 +8276,7 @@ __metadata:
  languageName: node
  linkType: hard

-"regexp.prototype.flags@npm:^1.5.1, regexp.prototype.flags@npm:^1.5.2":
+"regexp.prototype.flags@npm:^1.5.2":
  version: 1.5.2
  resolution: "regexp.prototype.flags@npm:1.5.2"
  dependencies:
@ -9033,15 +8936,6 @@ __metadata:
  languageName: node
  linkType: hard

-"stop-iteration-iterator@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "stop-iteration-iterator@npm:1.0.0"
-  dependencies:
-    internal-slot: "npm:^1.0.4"
-  checksum: 10c0/c4158d6188aac510d9e92925b58709207bd94699e9c31186a040c80932a687f84a51356b5895e6dc72710aad83addb9411c22171832c9ae0e6e11b7d61b0dfb9
-  languageName: node
-  linkType: hard
-
 "strict-event-emitter@npm:^0.5.1":
  version: 0.5.1
  resolution: "strict-event-emitter@npm:0.5.1"
@ -9778,9 +9672,9 @@ __metadata:
    "@mui/material": "npm:5.15.3"
    "@mui/x-date-pickers": "npm:^7.0.0"
    "@tanstack/react-table": "npm:^8.10.7"
-    "@testing-library/dom": "npm:8.20.1"
+    "@testing-library/dom": "npm:10.4.0"
    "@testing-library/jest-dom": "npm:6.5.0"
-    "@testing-library/react": "npm:13.4.0"
+    "@testing-library/react": "npm:16.0.1"
    "@testing-library/user-event": "npm:14.5.2"
    "@types/css-mediaquery": "npm:^0.1.4"
    "@types/debounce": "npm:1.2.4"
@ -10292,19 +10186,7 @@ __metadata:
  languageName: node
  linkType: hard

-"which-collection@npm:^1.0.1":
-  version: 1.0.2
-  resolution: "which-collection@npm:1.0.2"
-  dependencies:
-    is-map: "npm:^2.0.3"
-    is-set: "npm:^2.0.3"
-    is-weakmap: "npm:^2.0.2"
-    is-weakset: "npm:^2.0.3"
-  checksum: 10c0/3345fde20964525a04cdf7c4a96821f85f0cc198f1b2ecb4576e08096746d129eb133571998fe121c77782ac8f21cbd67745a3d35ce100d26d4e684c142ea1f2
-  languageName: node
-  linkType: hard
-
-"which-typed-array@npm:^1.1.13, which-typed-array@npm:^1.1.14, which-typed-array@npm:^1.1.15":
+"which-typed-array@npm:^1.1.14, which-typed-array@npm:^1.1.15":
  version: 1.1.15
  resolution: "which-typed-array@npm:1.1.15"
  dependencies: