Upgrades to React 19.2 (#39330)

2026-09-13 00:36:00 -05:00 · 2026-06-17 11:12:55 +02:00
parent b777936bdf
commit ccd6fb92f9
10 changed files with 90 additions and 188 deletions
--- a/app/javascript/mastodon/components/tests/snapshots/avatar-test.jsx.snap
+++ b/app/javascript/mastodon/components/tests/snapshots/avatar-test.jsx.snap
@@ -2,20 +2,11 @@

 exports[`<Avatar /> > Autoplay > renders a animated avatar 1`] = `
 <span
-  className="account__avatar account__avatar--loading"
-  onMouseEnter={[Function]}
-  onMouseLeave={[Function]}
-  style={
-    {
-      "height": "100px",
-      "width": "100px",
-    }
-  }
+  class="account__avatar account__avatar--loading"
+  style="width: 100px; height: 100px;"
 >
  <img
    alt=""
-    onError={[Function]}
-    onLoad={[Function]}
    src="/animated/alice.gif"
  />
 </span>
@@ -23,20 +14,11 @@ exports[`<Avatar /> > Autoplay > renders a animated avatar 1`] = `

 exports[`<Avatar /> > Still > renders a still avatar 1`] = `
 <span
-  className="account__avatar account__avatar--loading"
-  onMouseEnter={[Function]}
-  onMouseLeave={[Function]}
-  style={
-    {
-      "height": "100px",
-      "width": "100px",
-    }
-  }
+  class="account__avatar account__avatar--loading"
+  style="width: 100px; height: 100px;"
 >
  <img
    alt=""
-    onError={[Function]}
-    onLoad={[Function]}
    src="/static/alice.jpg"
  />
 </span>
--- a/app/javascript/mastodon/components/tests/snapshots/avatar_overlay-test.jsx.snap
+++ b/app/javascript/mastodon/components/tests/snapshots/avatar_overlay-test.jsx.snap
@@ -2,50 +2,31 @@

 exports[`<AvatarOverlay > renders a overlay avatar 1`] = `
 <div
-  className="account__avatar-overlay"
-  onMouseEnter={[Function]}
-  onMouseLeave={[Function]}
-  style={
-    {
-      "height": 46,
-      "width": 46,
-    }
-  }
+  class="account__avatar-overlay"
+  style="width: 46px; height: 46px;"
 >
  <div
-    className="account__avatar-overlay-base"
+    class="account__avatar-overlay-base"
  >
    <div
-      className="account__avatar"
-      style={
-        {
-          "height": "36px",
-          "width": "36px",
-        }
-      }
+      class="account__avatar"
+      style="width: 36px; height: 36px;"
    >
      <img
        alt="alice"
-        onError={[Function]}
        src="/static/alice.jpg"
      />
    </div>
  </div>
  <div
-    className="account__avatar-overlay-overlay"
+    class="account__avatar-overlay-overlay"
  >
    <div
-      className="account__avatar"
-      style={
-        {
-          "height": "24px",
-          "width": "24px",
-        }
-      }
+      class="account__avatar"
+      style="width: 24px; height: 24px;"
    >
      <img
        alt="eve@blackhat.lair"
-        onError={[Function]}
        src="/static/eve.jpg"
      />
    </div>
--- a/app/javascript/mastodon/components/tests/snapshots/button-test.jsx.snap
+++ b/app/javascript/mastodon/components/tests/snapshots/button-test.jsx.snap
@@ -2,41 +2,36 @@

 exports[`<Button /> > adds class "button-secondary" if props.secondary given 1`] = `
 <button
-  className="button button-secondary"
-  onClick={[Function]}
+  class="button button-secondary"
  type="button"
 />
 `;

 exports[`<Button /> > renders a button element 1`] = `
 <button
-  className="button"
-  onClick={[Function]}
+  class="button"
  type="button"
 />
 `;

 exports[`<Button /> > renders a disabled attribute if props.disabled given 1`] = `
 <button
-  className="button"
-  disabled={true}
-  onClick={[Function]}
+  class="button"
+  disabled=""
  type="button"
 />
 `;

 exports[`<Button /> > renders class="button--block" if props.block given 1`] = `
 <button
-  className="button button--block"
-  onClick={[Function]}
+  class="button button--block"
  type="button"
 />
 `;

 exports[`<Button /> > renders the children 1`] = `
 <button
-  className="button"
-  onClick={[Function]}
+  class="button"
  type="button"
 >
  <p>
@@ -47,8 +42,7 @@ exports[`<Button /> > renders the children 1`] = `

 exports[`<Button /> > renders the given text 1`] = `
 <button
-  className="button"
-  onClick={[Function]}
+  class="button"
  type="button"
 >
  foo
@@ -57,8 +51,7 @@ exports[`<Button /> > renders the given text 1`] = `

 exports[`<Button /> > renders the props.text instead of children 1`] = `
 <button
-  className="button"
-  onClick={[Function]}
+  class="button"
  type="button"
 >
  foo
--- a/app/javascript/mastodon/components/tests/avatar-test.jsx
+++ b/app/javascript/mastodon/components/tests/avatar-test.jsx
@@ -1,5 +1,5 @@

-import renderer from 'react-test-renderer';
+import { render } from '@/testing/rendering';

 import { accountDefaultValues, createAccountFromServerJSON } from '@/mastodon/models/account';

@@ -19,19 +19,17 @@ describe('<Avatar />', () => {

  describe('Autoplay', () => {
    it('renders a animated avatar', () => {
-      const component = renderer.create(<Avatar account={account} animate size={size} />);
-      const tree      = component.toJSON();
+      const { container } = render(<Avatar account={account} animate size={size} />);

-      expect(tree).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
    });
  });

  describe('Still', () => {
    it('renders a still avatar', () => {
-      const component = renderer.create(<Avatar account={account} size={size} />);
-      const tree      = component.toJSON();
+      const { container } = render(<Avatar account={account} size={size} />);

-      expect(tree).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
    });
  });

--- a/app/javascript/mastodon/components/tests/avatar_overlay-test.jsx
+++ b/app/javascript/mastodon/components/tests/avatar_overlay-test.jsx
@@ -1,6 +1,6 @@
 import { fromJS } from 'immutable';

-import renderer from 'react-test-renderer';
+import { render } from '@/testing/rendering';

 import { AvatarOverlay } from '../avatar_overlay';

@@ -22,9 +22,8 @@ describe('<AvatarOverlay', () => {
  });

  it('renders a overlay avatar', () => {
-    const component = renderer.create(<AvatarOverlay account={account} friend={friend} />);
-    const tree      = component.toJSON();
+    const { container } = render(<AvatarOverlay account={account} friend={friend} />);

-    expect(tree).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
  });
 });
--- a/app/javascript/mastodon/components/tests/button-test.jsx
+++ b/app/javascript/mastodon/components/tests/button-test.jsx
@@ -1,23 +1,19 @@
-import renderer from 'react-test-renderer';
-
 import { render, fireEvent, screen } from '@/testing/rendering';

 import { Button } from '../button';

 describe('<Button />', () => {
  it('renders a button element', () => {
-    const component = renderer.create(<Button />);
-    const tree      = component.toJSON();
+    const { container } = render(<Button />);

-    expect(tree).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
  });

  it('renders the given text', () => {
    const text      = 'foo';
-    const component = renderer.create(<Button text={text} />);
-    const tree      = component.toJSON();
+    const { container } = render(<Button text={text} />);

-    expect(tree).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
  });

  it('handles click events using the given handler', () => {
@@ -37,40 +33,35 @@ describe('<Button />', () => {
  });

  it('renders a disabled attribute if props.disabled given', () => {
-    const component = renderer.create(<Button disabled />);
-    const tree      = component.toJSON();
+    const { container } = render(<Button disabled />);

-    expect(tree).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
  });

  it('renders the children', () => {
    const children  = <p>children</p>;
-    const component = renderer.create(<Button>{children}</Button>);
-    const tree      = component.toJSON();
+    const { container } = render(<Button>{children}</Button>);

-    expect(tree).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
  });

  it('renders the props.text instead of children', () => {
    const text      = 'foo';
    const children  = <p>children</p>;
-    const component = renderer.create(<Button text={text}>{children}</Button>);
-    const tree      = component.toJSON();
+    const { container } = render(<Button text={text}>{children}</Button>);

-    expect(tree).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
  });

  it('renders class="button--block" if props.block given', () => {
-    const component = renderer.create(<Button block />);
-    const tree      = component.toJSON();
+    const { container } = render(<Button block />);

-    expect(tree).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
  });

  it('adds class "button-secondary" if props.secondary given', () => {
-    const component = renderer.create(<Button secondary />);
-    const tree      = component.toJSON();
+    const { container } = render(<Button secondary />);

-    expect(tree).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
  });
 });
--- a/app/javascript/mastodon/components/status_quoted.tsx
+++ b/app/javascript/mastodon/components/status_quoted.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { ComponentType, ReactNode } from 'react';

 import { defineMessage, FormattedMessage, useIntl } from 'react-intl';

@@ -142,6 +143,21 @@ const FilteredQuote: React.FC<{
  );
 };

+// Adds a wrapper around StatusContainer as the types aren't inheriting correctly with Redux + React 19.
+// TODO: Remove this after the Status component is in TS.
+interface StatusContainerForQuotesProps {
+  id?: string | null;
+  contextType?: string;
+  isQuotedPost?: boolean;
+  avatarSize?: number;
+  headerRenderFn?: StatusHeaderRenderFn;
+  children?: ReactNode;
+  [key: string]: unknown;
+}
+
+const StatusContainerWithChildren =
+  StatusContainer as unknown as ComponentType<StatusContainerForQuotesProps>;
+
 interface QuotedStatusProps {
  quote: QuoteMap;
  contextType?: string;
@@ -338,7 +354,7 @@ export const QuotedStatus: React.FC<QuotedStatusProps> = ({

  return (
    <div className='status__quote'>
-      <StatusContainer
+      <StatusContainerWithChildren
        isQuotedPost
        id={quotedStatusId}
        contextType={contextType}
@@ -356,7 +372,7 @@ export const QuotedStatus: React.FC<QuotedStatusProps> = ({
            nestingLevel={nestingLevel + 1}
          />
        )}
-      </StatusContainer>
+      </StatusContainerWithChildren>
    </div>
  );
 };
@@ -383,15 +399,15 @@ export const StatusQuoteManager = (props: StatusQuoteManagerProps) => {

  if (quote) {
    return (
-      <StatusContainer {...props}>
+      <StatusContainerWithChildren {...props}>
        <QuotedStatus
          quote={quote}
          parentQuotePostId={status?.get('id') as string}
          contextType={props.contextType}
        />
-      </StatusContainer>
+      </StatusContainerWithChildren>
    );
  }

-  return <StatusContainer {...props} />;
+  return <StatusContainerWithChildren {...props} />;
 };
--- a/app/javascript/mastodon/utils/react_router.tsx
+++ b/app/javascript/mastodon/utils/react_router.tsx
@@ -18,7 +18,7 @@ export const WithOptionalRouterPropTypes = {

 export interface OptionalRouterProps {
  ref: unknown;
-  wrappedComponentRef: unknown;
+  wrappedComponentRef?: string | ((...args: unknown[]) => unknown) | object;
 }

 // This is copied from https://github.com/remix-run/react-router/blob/v5.3.4/packages/react-router/modules/withRouter.js
@@ -54,14 +54,6 @@ export function withOptionalRouter<

  C.displayName = displayName;
  C.WrappedComponent = Component;
-  C.propTypes = {
-    ...Component.propTypes,
-    wrappedComponentRef: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.func,
-      PropTypes.object,
-    ]),
-  };

  return hoistStatics(C, Component);
 }
--- a/package.json
+++ b/package.json
@@ -91,8 +91,8 @@
    "postcss-preset-env": "^11.0.0",
    "prop-types": "^15.8.1",
    "punycode": "^2.3.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
    "react-easy-crop": "^6.0.0",
    "react-immutable-proptypes": "^2.2.0",
    "react-immutable-pure-component": "^2.2.2",
@@ -145,13 +145,12 @@
    "@types/object-assign": "^4.0.30",
    "@types/prop-types": "^15.7.5",
    "@types/punycode": "^2.1.0",
-    "@types/react": "^18.2.7",
-    "@types/react-dom": "^18.2.4",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
    "@types/react-immutable-proptypes": "^2.1.0",
    "@types/react-router": "^5.1.20",
    "@types/react-router-dom": "^5.3.3",
    "@types/react-sparklines": "^1.7.2",
-    "@types/react-test-renderer": "^18.0.0",
    "@types/redux-immutable": "^4.0.3",
    "@types/requestidlecallback": "^0.3.5",
    "@vitest/browser": "^4.1.0",
@@ -177,7 +176,6 @@
    "msw-storybook-addon": "^2.0.6",
    "oxfmt": "^0.47.0",
    "playwright": "^1.60.0",
-    "react-test-renderer": "^18.2.0",
    "storybook": "^10.3.0",
    "stylelint": "^17.0.0",
    "stylelint-config-standard-scss": "^17.0.0",
--- a/yarn.lock
+++ b/yarn.lock
@@ -2925,13 +2925,12 @@ __metadata:
    "@types/object-assign": "npm:^4.0.30"
    "@types/prop-types": "npm:^15.7.5"
    "@types/punycode": "npm:^2.1.0"
-    "@types/react": "npm:^18.2.7"
-    "@types/react-dom": "npm:^18.2.4"
+    "@types/react": "npm:^19.2.0"
+    "@types/react-dom": "npm:^19.2.0"
    "@types/react-immutable-proptypes": "npm:^2.1.0"
    "@types/react-router": "npm:^5.1.20"
    "@types/react-router-dom": "npm:^5.3.3"
    "@types/react-sparklines": "npm:^1.7.2"
-    "@types/react-test-renderer": "npm:^18.0.0"
    "@types/redux-immutable": "npm:^4.0.3"
    "@types/requestidlecallback": "npm:^0.3.5"
    "@unhead/react": "npm:^3.1.0"
@@ -2995,8 +2994,8 @@ __metadata:
    postcss-preset-env: "npm:^11.0.0"
    prop-types: "npm:^15.8.1"
    punycode: "npm:^2.3.0"
-    react: "npm:^18.2.0"
-    react-dom: "npm:^18.2.0"
+    react: "npm:^19.2.0"
+    react-dom: "npm:^19.2.0"
    react-easy-crop: "npm:^6.0.0"
    react-immutable-proptypes: "npm:^2.2.0"
    react-immutable-pure-component: "npm:^2.2.2"
@@ -3008,7 +3007,6 @@ __metadata:
    react-router-dom: "npm:^5.3.4"
    react-select: "npm:^5.7.3"
    react-sparklines: "npm:^1.7.0"
-    react-test-renderer: "npm:^18.2.0"
    react-textarea-autosize: "npm:^8.4.1"
    redux-immutable: "npm:^4.0.0"
    regenerator-runtime: "npm:^0.14.0"
@@ -4870,15 +4868,6 @@ __metadata:
  languageName: node
  linkType: hard

-"@types/react-test-renderer@npm:^18.0.0":
-  version: 18.3.1
-  resolution: "@types/react-test-renderer@npm:18.3.1"
-  dependencies:
-    "@types/react": "npm:^18"
-  checksum: 10c0/9fc8467ff1a3f14be6cc3498a75fc788d2c92c0fffa7bf21269ed5d9d82db9195bf2178ddc42ea16a0836995c1b77601c6be8abb27bd1864668c418c6d0e5a3b
-  languageName: node
-  linkType: hard
-
 "@types/react-transition-group@npm:^4.4.0":
  version: 4.4.8
  resolution: "@types/react-transition-group@npm:4.4.8"
@@ -9929,7 +9918,7 @@ __metadata:
  languageName: node
  linkType: hard

-"loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0, loose-envify@npm:^1.2.0, loose-envify@npm:^1.3.1, loose-envify@npm:^1.4.0":
+"loose-envify@npm:^1.0.0, loose-envify@npm:^1.2.0, loose-envify@npm:^1.3.1, loose-envify@npm:^1.4.0":
  version: 1.4.0
  resolution: "loose-envify@npm:1.4.0"
  dependencies:
@@ -12121,15 +12110,14 @@ __metadata:
  languageName: node
  linkType: hard

-"react-dom@npm:^18.2.0":
-  version: 18.3.1
-  resolution: "react-dom@npm:18.3.1"
+"react-dom@npm:^19.2.0":
+  version: 19.2.7
+  resolution: "react-dom@npm:19.2.7"
  dependencies:
-    loose-envify: "npm:^1.1.0"
-    scheduler: "npm:^0.23.2"
+    scheduler: "npm:^0.27.0"
  peerDependencies:
-    react: ^18.3.1
-  checksum: 10c0/a752496c1941f958f2e8ac56239172296fcddce1365ce45222d04a1947e0cc5547df3e8447f855a81d6d39f008d7c32eab43db3712077f09e3f67c4874973e85
+    react: ^19.2.7
+  checksum: 10c0/970ff600f6e80d47d39e2f226f12f226173b3cba3382efc97c5f0cd663de9af38c7a4c11c213fb936094faeac83060d660247accaa96b752180d5b951b9cfecb
  languageName: node
  linkType: hard

@@ -12181,13 +12169,6 @@ __metadata:
  languageName: node
  linkType: hard

-"react-is@npm:^16.12.0 || ^17.0.0 || ^18.0.0, react-is@npm:^18.3.1":
-  version: 18.3.1
-  resolution: "react-is@npm:18.3.1"
-  checksum: 10c0/f2f1e60010c683479e74c63f96b09fb41603527cd131a9959e2aee1e5a8b0caf270b365e5ca77d4a6b18aae659b60a86150bb3979073528877029b35aecd2072
-  languageName: node
-  linkType: hard
-
 "react-is@npm:^16.13.1, react-is@npm:^16.6.0, react-is@npm:^16.7.0":
  version: 16.13.1
  resolution: "react-is@npm:16.13.1"
@@ -12318,18 +12299,6 @@ __metadata:
  languageName: node
  linkType: hard

-"react-shallow-renderer@npm:^16.15.0":
-  version: 16.15.0
-  resolution: "react-shallow-renderer@npm:16.15.0"
-  dependencies:
-    object-assign: "npm:^4.1.1"
-    react-is: "npm:^16.12.0 || ^17.0.0 || ^18.0.0"
-  peerDependencies:
-    react: ^16.0.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/c194d741792e86043a4ae272f7353c1cb9412bc649945c4220c6a101a6ea5410cceb3d65d5a4d750f11a24f7426e8eec7977e8a4e3ad5d3ee235ca2b18166fa8
-  languageName: node
-  linkType: hard
-
 "react-sparklines@npm:^1.7.0":
  version: 1.7.0
  resolution: "react-sparklines@npm:1.7.0"
@@ -12342,19 +12311,6 @@ __metadata:
  languageName: node
  linkType: hard

-"react-test-renderer@npm:^18.2.0":
-  version: 18.3.1
-  resolution: "react-test-renderer@npm:18.3.1"
-  dependencies:
-    react-is: "npm:^18.3.1"
-    react-shallow-renderer: "npm:^16.15.0"
-    scheduler: "npm:^0.23.2"
-  peerDependencies:
-    react: ^18.3.1
-  checksum: 10c0/c633558ef9af33bc68f0c4dbb5163a004c4fb9eade7bd0a7cfc0355fb367f36bd9d96533c90b7e85a146be6c525113a15f58683d269e0177ad77e2b04d4fe51c
-  languageName: node
-  linkType: hard
-
 "react-textarea-autosize@npm:^8.4.1":
  version: 8.5.9
  resolution: "react-textarea-autosize@npm:8.5.9"
@@ -12390,12 +12346,10 @@ __metadata:
  languageName: node
  linkType: hard

-"react@npm:^18.2.0":
-  version: 18.3.1
-  resolution: "react@npm:18.3.1"
-  dependencies:
-    loose-envify: "npm:^1.1.0"
-  checksum: 10c0/283e8c5efcf37802c9d1ce767f302dd569dd97a70d9bb8c7be79a789b9902451e0d16334b05d73299b20f048cbc3c7d288bbbde10b701fa194e2089c237dbea3
+"react@npm:^19.2.0":
+  version: 19.2.7
+  resolution: "react@npm:19.2.7"
+  checksum: 10c0/0bd0e2f1bbd4ba97561c6597bf8a5fec05e6476fe61e165c1065598d16668efc6715205599c94d3ddd49d36cb0f21cbf1b9bcc18ee840b805ce222c3e8d558ac
  languageName: node
  linkType: hard

@@ -12963,15 +12917,6 @@ __metadata:
  languageName: node
  linkType: hard

-"scheduler@npm:^0.23.2":
-  version: 0.23.2
-  resolution: "scheduler@npm:0.23.2"
-  dependencies:
-    loose-envify: "npm:^1.1.0"
-  checksum: 10c0/26383305e249651d4c58e6705d5f8425f153211aef95f15161c151f7b8de885f24751b377e4a0b3dd42cce09aad3f87a61dab7636859c0d89b7daf1a1e2a5c78
-  languageName: node
-  linkType: hard
-
 "scheduler@npm:^0.26.0":
  version: 0.26.0
  resolution: "scheduler@npm:0.26.0"
@@ -12979,6 +12924,13 @@ __metadata:
  languageName: node
  linkType: hard

+"scheduler@npm:^0.27.0":
+  version: 0.27.0
+  resolution: "scheduler@npm:0.27.0"
+  checksum: 10c0/4f03048cb05a3c8fddc45813052251eca00688f413a3cee236d984a161da28db28ba71bd11e7a3dd02f7af84ab28d39fb311431d3b3772fed557945beb00c452
+  languageName: node
+  linkType: hard
+
 "scroll-behavior@npm:^0.11.0":
  version: 0.11.0
  resolution: "scroll-behavior@npm:0.11.0"