chore: upgrade to React v19 (#2615)

Author: MartinCupela

.releaserc.json

@@ -72,9 +72,11 @@
       }
     ],
     [
-      "@semantic-release/exec", {
-      "prepareCmd": "NEXT_VERSION=${nextRelease.version} npm run build"
-    }],
+      "@semantic-release/exec",
+      {
+        "prepareCmd": "NEXT_VERSION=${nextRelease.version} npm run build"
+      }
+    ],
     [
       "@semantic-release/changelog",
       {

package.json

@@ -122,7 +122,6 @@
     "react-dropzone": "^14.2.3",
     "react-fast-compare": "^3.2.2",
     "react-image-gallery": "1.2.12",
-    "react-is": "^18.1.0",
     "react-markdown": "^8.0.7",
     "react-player": "2.10.1",
     "react-popper": "^2.3.0",
@@ -144,8 +143,8 @@
     "@emoji-mart/data": "^1.1.0",
     "@emoji-mart/react": "^1.1.0",
     "emoji-mart": "^5.4.0",
-    "react": "^18.0.0 || ^17.0.0 || ^16.8.0",
-    "react-dom": "^18.0.0 || ^17.0.0 || ^16.8.0",
+    "react": "^19.0.0 || ^18.0.0 || ^17.0.0 || ^16.8.0",
+    "react-dom": "^19.0.0 || ^18.0.0 || ^17.0.0 || ^16.8.0",
     "stream-chat": "^8.50.0"
   },
   "peerDependenciesMeta": {
@@ -189,12 +188,12 @@
     "@semantic-release/git": "^10.0.1",
     "@stream-io/rollup-plugin-node-builtins": "^2.1.5",
     "@stream-io/stream-chat-css": "^5.6.0",
-    "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^13.1.1",
-    "@testing-library/react-hooks": "^8.0.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
     "@types/deep-equal": "^1.0.1",
     "@types/dotenv": "^8.2.0",
     "@types/hast": "^2.3.4",
+    "@types/jest": "^29.5.14",
     "@types/jsdom": "^21.1.5",
     "@types/linkifyjs": "^2.1.3",
     "@types/lodash.debounce": "^4.0.7",
@@ -203,10 +202,9 @@
     "@types/lodash.throttle": "^4.1.7",
     "@types/lodash.uniqby": "^4.7.7",
     "@types/moment": "^2.13.0",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
     "@types/react-image-gallery": "^1.2.4",
-    "@types/react-is": "^18.2.4",
     "@types/textarea-caret": "3.0.0",
     "@types/use-sync-external-store": "^0.0.6",
     "@types/uuid": "^8.3.0",
@@ -250,17 +248,16 @@
     "i18next-parser": "^6.0.0",
     "jest": "^29.7.0",
     "jest-axe": "^8.0.0",
-    "jest-environment-jsdom": "^28.1.3",
+    "jest-environment-jsdom": "^29.7.0",
     "jsdom": "^24.1.1",
     "lint-staged": "^15.2.1",
     "moment-timezone": "^0.5.43",
     "prettier": "^2.2.0",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
-    "react-test-renderer": "^18.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "semantic-release": "^19.0.5",
     "stream-chat": "^8.50.0",
-    "ts-jest": "^29.1.4",
+    "ts-jest": "^29.2.5",
     "typescript": "^5.4.5"
   },
   "scripts": {

src/components/Attachment/__tests__/AttachmentActions.test.js

@@ -2,7 +2,6 @@ import React from 'react';
 import '@testing-library/jest-dom';
 import { fireEvent, render, waitFor } from '@testing-library/react';
 
-import renderer from 'react-test-renderer';
 import { nanoid } from 'nanoid';
 import { AttachmentActions } from '../AttachmentActions';
 
@@ -22,16 +21,14 @@ const actions = [
 
 describe('AttachmentActions', () => {
   it('should render AttachmentActions component', () => {
-    const tree = renderer
-      .create(
-        getComponent({
-          actionHandler: jest.fn(),
-          actions,
-          id: nanoid(),
-        }),
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
+    const { container } = render(
+      getComponent({
+        actionHandler: jest.fn(),
+        actions,
+        id: nanoid(),
+      }),
+    );
+    expect(container).toMatchSnapshot();
   });
   it('should call actionHandler on click', async () => {
     const actionHandler = jest.fn();

src/components/Attachment/__tests__/File.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
+import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import renderer from 'react-test-renderer';
 
 import { FileAttachment } from '../FileAttachment';
 import { TranslationContext } from '../../../context';
@@ -23,7 +23,7 @@ const file = {
 
 describe('File', () => {
   it('should render File component', () => {
-    const tree = renderer.create(getComponent({ attachment: file })).toJSON();
-    expect(tree).toMatchSnapshot();
+    const { container } = render(getComponent({ attachment: file }));
+    expect(container).toMatchSnapshot();
   });
 });

src/components/Attachment/__tests__/__snapshots__/AttachmentActions.test.js.snap

@@ -1,29 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AttachmentActions should render AttachmentActions component 1`] = `
-<div
-  className="str-chat__message-attachment-actions"
->
+<div>
   <div
-    className="str-chat__message-attachment-actions-form"
+    class="str-chat__message-attachment-actions"
   >
-    <span />
-    <button
-      className="str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--undefined"
-      data-testid="action 1 name"
-      data-value="action 1"
-      onClick={[Function]}
+    <div
+      class="str-chat__message-attachment-actions-form"
     >
-      action 1 text
-    </button>
-    <button
-      className="str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--undefined"
-      data-testid="action 2 name"
-      data-value="action 2"
-      onClick={[Function]}
-    >
-      action 2 text
-    </button>
+      <span />
+      <button
+        class="str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--undefined"
+        data-testid="action 1 name"
+        data-value="action 1"
+      >
+        action 1 text
+      </button>
+      <button
+        class="str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--undefined"
+        data-testid="action 2 name"
+        data-value="action 2"
+      >
+        action 2 text
+      </button>
+    </div>
   </div>
 </div>
 `;