Upgrades to React 19.2 (#39330)

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>

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>

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

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();
     });
   });
 

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();
   });
 });

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();
   });
 });

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} />;
 };

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);
 }