build(deps): Bump react-dom and @types/react-dom (#1826)

* build(deps): Bump react-dom and @types/react-dom

Bumps [react-dom](https://github.com/facebook/react/tree/HEAD/packages/react-dom) and [@types/react-dom](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react-dom). These dependencies needed to be updated together.

Updates `react-dom` from 18.2.0 to 18.3.1
- [Release notes](https://github.com/facebook/react/releases)
- [Changelog](https://github.com/facebook/react/blob/main/CHANGELOG.md)
- [Commits](https://github.com/facebook/react/commits/v18.3.1/packages/react-dom)

Updates `@types/react-dom` from 18.2.24 to 18.3.0
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react-dom)

---
updated-dependencies:
- dependency-name: react-dom
  dependency-type: direct:production
  update-type: version-update:semver-minor
- dependency-name: "@types/react-dom"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <[email protected]>

* fix: update act import to remove depreaction warning

* style: reformat code after import change

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Paul Schreiber <[email protected]>

package.json

@@ -34,7 +34,7 @@
     "react": "^18.2.0",
     "react-avatar-editor": "^13.0.2",
     "react-beautiful-dnd": "^13.1.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",
     "react-error-boundary": "^4.0.13",
     "react-helmet-async": "^2.0.4",
@@ -98,7 +98,7 @@
     "@types/jest": "^29.5.12",
     "@types/js-cookie": "^3.0.6",
     "@types/react": "^18.2.78",
-    "@types/react-dom": "^18.2.24",
+    "@types/react-dom": "^18.3.0",
     "@typescript-eslint/parser": "^7.6.0",
     "depcheck": "^1.4.7",
     "eslint-config-prettier": "^9.1.0",

src/account/components/AccountProfile.test.js

@@ -15,10 +15,9 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 import { fireEvent, render, screen, within } from 'tests/utils';
-import React from 'react';
+import React, { act } from 'react';
 import { when } from 'jest-when';
 import _ from 'lodash/fp';
-import { act } from 'react-dom/test-utils';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import * as terrasoApi from 'terraso-client-shared/terrasoApi/api';
 

src/contact/ContactForm.test.js

@@ -15,9 +15,8 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 import { render, screen } from 'tests/utils';
-import React from 'react';
+import React, { act } from 'react';
 import _ from 'lodash/fp';
-import { act } from 'react-dom/test-utils';
 
 import { useScript } from 'custom-hooks';
 

src/group/components/GroupForm.test.js

@@ -15,8 +15,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 import { fireEvent, render, screen, within } from 'tests/utils';
-import React from 'react';
-import { act } from 'react-dom/test-utils';
+import React, { act } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import * as terrasoApi from 'terraso-client-shared/terrasoApi/api';
 

src/group/components/GroupList.test.js

@@ -15,8 +15,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 import { fireEvent, render, screen, within } from 'tests/utils';
-import React from 'react';
-import { act } from 'react-dom/test-utils';
+import React, { act } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import * as terrasoApi from 'terraso-client-shared/terrasoApi/api';
 import useMediaQuery from '@mui/material/useMediaQuery';

src/group/membership/components/GroupMembers.test.js

@@ -15,9 +15,8 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 import { fireEvent, render, screen, waitFor, within } from 'tests/utils';
-import React from 'react';
+import React, { act } from 'react';
 import _ from 'lodash/fp';
-import { act } from 'react-dom/test-utils';
 import { useNavigate, useParams } from 'react-router-dom';
 import * as terrasoApi from 'terraso-client-shared/terrasoApi/api';
 import { GROUP_TYPES_WITH_REDIRECTS } from 'tests/constants';

src/landscape/components/LandscapeForm/AffiliationUpdate.test.js

@@ -15,8 +15,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 import { fireEvent, render, screen, within } from 'tests/utils';
-import React from 'react';
-import { act } from 'react-dom/test-utils';
+import React, { act } from 'react';
 import { useParams } from 'react-router-dom';
 import * as terrasoApi from 'terraso-client-shared/terrasoApi/api';
 

src/landscape/components/LandscapeForm/BoundaryStepNewBoundariesFile.test.js

@@ -15,8 +15,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 import { fireEvent, render, screen, waitFor, within } from 'tests/utils';
-import React from 'react';
-import { act } from 'react-dom/test-utils';
+import React, { act } from 'react';
 import { useParams } from 'react-router-dom';
 import * as terrasoApi from 'terraso-client-shared/terrasoApi/api';
 

src/landscape/components/LandscapeForm/BoundaryStepNewDrawPolygon.test.js

@@ -15,9 +15,8 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 import { fireEvent, render, screen, waitFor, within } from 'tests/utils';
-import React from 'react';
+import React, { act } from 'react';
 import MapboxDraw from '@mapbox/mapbox-gl-draw';
-import { act } from 'react-dom/test-utils';
 import { useParams } from 'react-router-dom';
 import * as terrasoApi from 'terraso-client-shared/terrasoApi/api';
 

src/landscape/components/LandscapeForm/BoundaryStepNewFormPin.test.js

@@ -15,9 +15,8 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 import { fireEvent, render, screen, waitFor, within } from 'tests/utils';
-import React from 'react';
+import React, { act } from 'react';
 import MapboxDraw from '@mapbox/mapbox-gl-draw';
-import { act } from 'react-dom/test-utils';
 import { useParams } from 'react-router-dom';
 import * as terrasoApi from 'terraso-client-shared/terrasoApi/api';
 

src/landscape/components/LandscapeForm/DevelopmentStrategyUpdate.test.js

@@ -15,8 +15,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 import { fireEvent, render, screen } from 'tests/utils';
-import React from 'react';
-import { act } from 'react-dom/test-utils';
+import React, { act } from 'react';
 import { useParams } from 'react-router-dom';
 import * as terrasoApi from 'terraso-client-shared/terrasoApi/api';
 

src/landscape/components/LandscapeForm/KeyInfoNew.test.js

@@ -15,8 +15,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 import { fireEvent, render, screen, waitFor, within } from 'tests/utils';
-import React from 'react';
-import { act } from 'react-dom/test-utils';
+import React, { act } from 'react';
 import { useParams } from 'react-router-dom';
 import * as terrasoApi from 'terraso-client-shared/terrasoApi/api';
 

src/landscape/components/LandscapeForm/KeyInfoUpdate.test.js

@@ -15,8 +15,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 import { fireEvent, render, screen, within } from 'tests/utils';
-import React from 'react';
-import { act } from 'react-dom/test-utils';
+import React, { act } from 'react';
 import { useParams } from 'react-router-dom';
 import * as terrasoApi from 'terraso-client-shared/terrasoApi/api';
 

src/landscape/components/LandscapeForm/ProfileImageUpdate.test.js

@@ -15,9 +15,8 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 import { fireEvent, render, screen, waitFor } from 'tests/utils';
-import React from 'react';
+import React, { act } from 'react';
 import AvatarEditor from 'react-avatar-editor';
-import { act } from 'react-dom/test-utils';
 import { useParams } from 'react-router-dom';
 import * as terrasoApi from 'terraso-client-shared/terrasoApi/api';
 

src/landscape/components/LandscapeForm/ProfileUpdate.test.js

@@ -15,8 +15,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 import { fireEvent, render, screen, waitFor, within } from 'tests/utils';
-import React from 'react';
-import { act } from 'react-dom/test-utils';
+import React, { act } from 'react';
 import { useParams } from 'react-router-dom';
 import * as terrasoApi from 'terraso-client-shared/terrasoApi/api';
 

src/landscape/components/LandscapeList.test.js

@@ -15,8 +15,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 import { fireEvent, render, screen, waitFor, within } from 'tests/utils';
-import React from 'react';
-import { act } from 'react-dom/test-utils';
+import React, { act } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import * as terrasoApi from 'terraso-client-shared/terrasoApi/api';
 import { mockTerrasoAPIrequestGraphQL } from 'tests/apiUtils';

src/landscape/membership/components/LandscapeMembers.test.js

@@ -15,9 +15,8 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 import { fireEvent, render, screen, waitFor, within } from 'tests/utils';
-import React from 'react';
+import React, { act } from 'react';
 import _ from 'lodash/fp';
-import { act } from 'react-dom/test-utils';
 import * as terrasoApi from 'terraso-client-shared/terrasoApi/api';
 import { mockTerrasoAPIrequestGraphQL } from 'tests/apiUtils';
 import useMediaQuery from '@mui/material/useMediaQuery';

src/layout/AppBar.test.js

@@ -15,9 +15,8 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 import { fireEvent, render, screen } from 'tests/utils';
-import React from 'react';
+import React, { act } from 'react';
 import Cookies from 'js-cookie';
-import { act } from 'react-dom/test-utils';
 import { useLocation, useNavigate } from 'react-router-dom';
 import useMediaQuery from '@mui/material/useMediaQuery';
 

src/localization/components/LocalePicker.test.js

@@ -15,9 +15,8 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 import { fireEvent, render, screen, within } from 'tests/utils';
-import React from 'react';
+import React, { act } from 'react';
 import _ from 'lodash/fp';
-import { act } from 'react-dom/test-utils';
 import * as terrasoApi from 'terraso-client-shared/terrasoApi/api';
 import useMediaQuery from '@mui/material/useMediaQuery';
 

src/localization/i18n.test.js

@@ -15,7 +15,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 import { render, screen } from 'tests/utils';
-import { act } from 'react-dom/test-utils';
+import { act } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import i18n from 'localization/i18n';

src/navigation/components/Navigation.test.js

@@ -15,8 +15,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 import { fireEvent, render, screen } from 'tests/utils';
-import React from 'react';
-import { act } from 'react-dom/test-utils';
+import React, { act } from 'react';
 import { useLocation } from 'react-router-dom';
 
 import Navigation from 'navigation/components/Navigation';

src/tests/utils.js

@@ -19,13 +19,13 @@ import React from 'react';
 // import for side effects to ensure config happens before running tests
 import 'config';
 
+import { act } from 'react';
 import {
   waitFor as baseWaitFor,
   cleanup,
   render as rtlRender,
 } from '@testing-library/react';
 import { axe, toHaveNoViolations } from 'jest-axe';
-import { act } from 'react-dom/test-utils';
 import createStore from 'terrasoApi/store';
 
 import AppWrappers from 'layout/AppWrappers';