Merge branch 'renovate/major-react-monorepo' into 'develop'

fix(deps): update react monorepo to v18 (major)

See merge request soapbox-pub/soapbox!367

app/soapbox/components/media-gallery.tsx

@@ -1,5 +1,5 @@
 import classNames from 'clsx';
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useLayoutEffect } from 'react';
 
 import Blurhash from 'soapbox/components/blurhash';
 import Icon from 'soapbox/components/icon';
@@ -533,7 +533,7 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
     />
   ));
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (node.current) {
       const { offsetWidth } = node.current;
 

app/soapbox/features/audio/index.tsx

@@ -1,7 +1,7 @@
 import classNames from 'clsx';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import Icon from 'soapbox/components/icon';
@@ -397,7 +397,7 @@ const Audio: React.FC<IAudio> = (props) => {
 
   const progress = Math.min((currentTime / getDuration()) * 100, 100);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (player.current) {
       _setDimensions();
     }

app/soapbox/features/chats/components/chat-page/__tests__/chat-page.test.tsx

@@ -6,7 +6,7 @@ import { __stub } from 'soapbox/api';
 import { normalizeAccount } from 'soapbox/normalizers';
 import { ReducerAccount } from 'soapbox/reducers/accounts';
 
-import { render, screen } from '../../../../../jest/test-helpers';
+import { render, screen, waitFor } from '../../../../../jest/test-helpers';
 import ChatPage from '../chat-page';
 
 describe('<ChatPage />', () => {
@@ -48,7 +48,10 @@ describe('<ChatPage />', () => {
         await userEvent.click(screen.getByTestId('button'));
 
         expect(screen.getByTestId('chat-page')).toBeInTheDocument();
-        expect(screen.getByTestId('toast')).toHaveTextContent('Chat Settings updated successfully');
+
+        await waitFor(() => {
+          expect(screen.getByTestId('toast')).toHaveTextContent('Chat Settings updated successfully');
+        });
       });
     });
 
@@ -77,7 +80,10 @@ describe('<ChatPage />', () => {
       it('renders the Chats', async () => {
         render(<ChatPage />, undefined, store);
         await userEvent.click(screen.getByTestId('button'));
-        expect(screen.getByTestId('toast')).toHaveTextContent('Chat Settings failed to update.');
+
+        await waitFor(() => {
+          expect(screen.getByTestId('toast')).toHaveTextContent('Chat Settings failed to update.');
+        });
       });
     });
   });

app/soapbox/features/chats/components/chat-page/chat-page.tsx

@@ -1,5 +1,5 @@
 import classNames from 'clsx';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { matchPath, Route, Switch, useHistory } from 'react-router-dom';
 
 import { Stack } from 'soapbox/components/ui';
@@ -44,7 +44,7 @@ const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
     setHeight(fullHeight - top + offset);
   };
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     calculateHeight();
   }, [containerRef.current]);
 

app/soapbox/features/feed-filtering/__tests__/feed-carousel.test.tsx

@@ -78,6 +78,9 @@ describe('<FeedCarousel />', () => {
           expect(screen.getAllByTestId('carousel-item-avatar')[0]).toHaveClass('ring-primary-600');
         });
 
+        // HACK: wait for state change
+        await new Promise((r) => setTimeout(r, 0));
+
         // Marked as seen, not selected
         await userEvent.click(screen.getAllByTestId('carousel-item-avatar')[0]);
         await waitFor(() => {

app/soapbox/features/ui/components/modals/report-modal/__tests__/report-modal.test.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 
 import { __stub } from 'soapbox/api';
 
-import { render, screen } from '../../../../../../jest/test-helpers';
+import { render, screen, waitFor } from '../../../../../../jest/test-helpers';
 import { normalizeAccount, normalizeStatus } from '../../../../../../normalizers';
 import ReportModal from '../report-modal';
 
@@ -64,6 +64,9 @@ describe('<ReportModal />', () => {
     await user.click(screen.getByTestId('rule-1'));
     await user.click(screen.getByText(/Next/));
     await user.click(screen.getByText(/Submit/));
-    expect(screen.getByText(/Thanks for submitting your report/)).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(screen.getByText(/Thanks for submitting your report/)).toBeInTheDocument();
+    });
   });
 });

app/soapbox/features/verification/__tests__/registration.test.tsx

@@ -30,7 +30,10 @@ describe('<Registration />', () => {
         fireEvent.submit(screen.getByTestId('button'), { preventDefault: () => {} });
       });
 
-      expect(screen.getByTestId('toast')).toHaveTextContent(/welcome to/i);
+      await waitFor(() => {
+        expect(screen.getByTestId('toast')).toHaveTextContent(/welcome to/i);
+      });
+
       expect(screen.queryAllByRole('heading')).toHaveLength(0);
     });
   });
@@ -47,7 +50,9 @@ describe('<Registration />', () => {
         fireEvent.submit(screen.getByTestId('button'), { preventDefault: () => {} });
       });
 
-      expect(screen.getByTestId('toast')).toHaveTextContent(/this username has already been taken/i);
+      await waitFor(() => {
+        expect(screen.getByTestId('toast')).toHaveTextContent(/this username has already been taken/i);
+      });
     });
 
     it('handles generic errors', async() => {
@@ -61,7 +66,9 @@ describe('<Registration />', () => {
         fireEvent.submit(screen.getByTestId('button'), { preventDefault: () => {} });
       });
 
-      expect(screen.getByTestId('toast')).toHaveTextContent(/failed to register your account/i);
+      await waitFor(() => {
+        expect(screen.getByTestId('toast')).toHaveTextContent(/failed to register your account/i);
+      });
     });
   });
 

app/soapbox/features/verification/steps/__tests__/email-verification.test.tsx

@@ -60,7 +60,9 @@ describe('<EmailVerification />', () => {
         );
       });
 
-      expect(screen.getByTestId('form-group-error')).toHaveTextContent('is taken');
+      await waitFor(() => {
+        expect(screen.getByTestId('form-group-error')).toHaveTextContent('is taken');
+      });
     });
   });
 });

app/soapbox/features/verification/steps/__tests__/sms-verification.test.tsx

@@ -37,8 +37,10 @@ describe('<SmsVerification />', () => {
         );
       });
 
-      expect(screen.getByRole('heading')).toHaveTextContent('Verification code');
-      expect(screen.getByTestId('toast')).toHaveTextContent('A verification code has been sent to your phone number.');
+      await waitFor(() => {
+        expect(screen.getByRole('heading')).toHaveTextContent('Verification code');
+        expect(screen.getByTestId('toast')).toHaveTextContent('A verification code has been sent to your phone number.');
+      });
 
       act(() => {
         toast.remove();
@@ -68,8 +70,10 @@ describe('<SmsVerification />', () => {
         );
       });
 
-      expect(screen.getByRole('heading')).toHaveTextContent('Verification code');
-      expect(screen.getByTestId('toast')).toHaveTextContent('A verification code has been sent to your phone number.');
+      await waitFor(() => {
+        expect(screen.getByRole('heading')).toHaveTextContent('Verification code');
+        expect(screen.getByTestId('toast')).toHaveTextContent('A verification code has been sent to your phone number.');
+      });
 
       act(() => {
         toast.remove();
@@ -82,7 +86,9 @@ describe('<SmsVerification />', () => {
       await userEvent.type(screen.getByLabelText('Digit 5'), '5');
       await userEvent.type(screen.getByLabelText('Digit 6'), '6');
 
-      expect(screen.getByTestId('toast')).toHaveTextContent('Your SMS token has expired.');
+      await waitFor(() => {
+        expect(screen.getByTestId('toast')).toHaveTextContent('Your SMS token has expired.');
+      });
     });
   });
 
@@ -106,7 +112,9 @@ describe('<SmsVerification />', () => {
         );
       });
 
-      expect(screen.getByTestId('toast')).toHaveTextContent('Failed to send SMS message to your phone number.');
+      await waitFor(() => {
+        expect(screen.getByTestId('toast')).toHaveTextContent('Failed to send SMS message to your phone number.');
+      });
     });
   });
 });

app/soapbox/features/video/index.tsx

@@ -1,7 +1,7 @@
 import classNames from 'clsx';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import Blurhash from 'soapbox/components/blurhash';
@@ -159,7 +159,7 @@ const Video: React.FC<IVideo> = ({
     }
   };
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     setDimensions();
   }, [player.current]);
 

app/soapbox/hooks/useDimensions.ts

@@ -25,7 +25,7 @@ const useDimensions = (): UseDimensionsResult => {
   );
 
   useEffect((): any => {
-    if (!element) return null;
+    if (!element) return;
     observer.observe(element);
 
     return () => {

app/soapbox/jest/test-setup.ts

@@ -1,5 +1,6 @@
 'use strict';
 
+import { act } from '@testing-library/react';
 import { toast } from 'react-hot-toast';
 
 import { __clear as clearApiMocks } from '../api/__mocks__';
@@ -17,7 +18,9 @@ require('fake-indexeddb/auto');
 
 // Clear toasts after each test.
 afterEach(() => {
-  toast.remove();
+  act(() => {
+    toast.remove();
+  });
 });
 
 const intersectionObserverMock = () => ({ observe: () => null, disconnect: () => null });

app/soapbox/main.tsx

@@ -3,7 +3,7 @@
 import './precheck';
 import * as OfflinePluginRuntime from '@lcdp/offline-plugin/runtime';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { defineMessages } from 'react-intl';
 
 import { setSwUpdating } from 'soapbox/actions/sw';
@@ -34,9 +34,10 @@ function main() {
   }
 
   ready(() => {
-    const mountNode = document.getElementById('soapbox') as HTMLElement;
+    const container = document.getElementById('soapbox') as HTMLElement;
+    const root = createRoot(container);
 
-    ReactDOM.render(<Soapbox />, mountNode);
+    root.render(<Soapbox />);
 
     if (BuildConfig.NODE_ENV === 'production') {
       // avoid offline in dev mode because it's harder to debug

app/soapbox/queries/__tests__/relationships.test.ts

@@ -30,7 +30,7 @@ describe('useFetchRelationships()', () => {
       });
 
       it('is successful', async() => {
-        const { result } = renderHook(() => {
+        renderHook(() => {
           const fetchRelationships = useFetchRelationships();
 
           useEffect(() => {
@@ -40,11 +40,11 @@ describe('useFetchRelationships()', () => {
           return fetchRelationships;
         }, undefined, store);
 
-        await waitFor(() => expect(result.current.isLoading).toBe(false));
-
-        expect(store.getState().relationships.size).toBe(1);
-        expect(store.getState().relationships.getIn([id, 'id'])).toBe(id);
-        expect(store.getState().relationships.getIn([id, 'blocked_by'])).toBe(true);
+        await waitFor(() => {
+          expect(store.getState().relationships.size).toBe(1);
+          expect(store.getState().relationships.getIn([id, 'id'])).toBe(id);
+          expect(store.getState().relationships.getIn([id, 'blocked_by'])).toBe(true);
+        });
       });
     });
 
@@ -60,7 +60,7 @@ describe('useFetchRelationships()', () => {
       });
 
       it('is successful', async() => {
-        const { result } = renderHook(() => {
+        renderHook(() => {
           const fetchRelationships = useFetchRelationships();
 
           useEffect(() => {
@@ -70,11 +70,11 @@ describe('useFetchRelationships()', () => {
           return fetchRelationships;
         }, undefined, store);
 
-        await waitFor(() => expect(result.current.isLoading).toBe(false));
-
-        expect(store.getState().relationships.size).toBe(2);
-        expect(store.getState().relationships.getIn([ids[0], 'id'])).toBe(ids[0]);
-        expect(store.getState().relationships.getIn([ids[1], 'id'])).toBe(ids[1]);
+        await waitFor(() => {
+          expect(store.getState().relationships.size).toBe(2);
+          expect(store.getState().relationships.getIn([ids[0], 'id'])).toBe(ids[0]);
+          expect(store.getState().relationships.getIn([ids[1], 'id'])).toBe(ids[1]);
+        });
       });
     });
   });

package.json

@@ -72,7 +72,7 @@
     "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.7",
     "@tanstack/react-query": "^4.0.10",
-    "@testing-library/react": "^12.1.4",
+    "@testing-library/react": "^13.0.0",
     "@types/escape-html": "^1.0.1",
     "@types/http-link-header": "^1.0.3",
     "@types/jest": "^29.0.0",
@@ -153,10 +153,10 @@
     "prop-types": "^15.5.10",
     "punycode": "^2.1.1",
     "qrcode.react": "^3.0.2",
-    "react": "^17.0.2",
+    "react": "^18.0.0",
     "react-color": "^2.19.3",
     "react-datepicker": "^4.8.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.0.0",
     "react-helmet": "^6.1.0",
     "react-hot-toast": "^2.4.0",
     "react-hotkeys": "^1.1.4",

yarn.lock

@@ -2391,14 +2391,14 @@
     "@types/use-sync-external-store" "^0.0.3"
     use-sync-external-store "^1.2.0"
 
-"@testing-library/dom@^8.0.0":
-  version "8.12.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.12.0.tgz#fef5e545533fb084175dda6509ee71d7d2f72e23"
-  integrity sha512-rBrJk5WjI02X1edtiUcZhgyhgBhiut96r5Jp8J5qktKdcvLcZpKDW8i2hkGMMItxrghjXuQ5AM6aE0imnFawaw==
+"@testing-library/dom@^8.5.0":
+  version "8.19.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.19.1.tgz#0e2dafd281dedb930bb235eac1045470b4129d0e"
+  integrity sha512-P6iIPyYQ+qH8CvGauAqanhVnjrnRe0IZFSYCeGkSRW9q3u8bdVn2NPI+lasFyVsEQn1J/IFmp5Aax41+dAP9wg==
   dependencies:
     "@babel/code-frame" "^7.10.4"
     "@babel/runtime" "^7.12.5"
-    "@types/aria-query" "^4.2.0"
+    "@types/aria-query" "^5.0.1"
     aria-query "^5.0.0"
     chalk "^4.1.0"
     dom-accessibility-api "^0.5.9"
@@ -2428,14 +2428,14 @@
     "@babel/runtime" "^7.12.5"
     react-error-boundary "^3.1.0"
 
-"@testing-library/react@^12.1.4":
-  version "12.1.4"
-  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-12.1.4.tgz#09674b117e550af713db3f4ec4c0942aa8bbf2c0"
-  integrity sha512-jiPKOm7vyUw311Hn/HlNQ9P8/lHNtArAx0PisXyFixDDvfl8DbD6EUdbshK5eqauvBSvzZd19itqQ9j3nferJA==
+"@testing-library/react@^13.0.0":
+  version "13.4.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-13.4.0.tgz#6a31e3bf5951615593ad984e96b9e5e2d9380966"
+  integrity sha512-sXOGON+WNTh3MLE9rve97ftaZukN3oNf2KjDy7YTx6hcTO2uuLHuCGynMDhFwGw/jYf4OJ2Qk0i4i79qMNNkyw==
   dependencies:
     "@babel/runtime" "^7.12.5"
-    "@testing-library/dom" "^8.0.0"
-    "@types/react-dom" "*"
+    "@testing-library/dom" "^8.5.0"
+    "@types/react-dom" "^18.0.0"
 
 "@testing-library/user-event@^14.0.3":
   version "14.0.3"
@@ -2472,10 +2472,10 @@
   resolved "https://registry.yarnpkg.com/@tsconfig/node16/-/node16-1.0.3.tgz#472eaab5f15c1ffdd7f8628bd4c4f753995ec79e"
   integrity sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==
 
-"@types/aria-query@^4.2.0":
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.2.tgz#ed4e0ad92306a704f9fb132a0cfcf77486dbe2bc"
-  integrity sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==
+"@types/aria-query@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-5.0.1.tgz#3286741fb8f1e1580ac28784add4c7a1d49bdfbc"
+  integrity sha512-XTIieEY+gvJ39ChLcB4If5zHtPxt3Syj5rgZR+e1ctpmK8NjPf0zFqsz4JpLJT0xla9GFDKjy8Cpu331nrmE1Q==
 
 "@types/babel__core@^7.1.12", "@types/babel__core@^7.1.14":
   version "7.1.19"
@@ -2850,10 +2850,10 @@
     date-fns "^2.0.1"
     react-popper "^2.2.5"
 
-"@types/react-dom@*":
-  version "17.0.14"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.14.tgz#c8f917156b652ddf807711f5becbd2ab018dea9f"
-  integrity sha512-H03xwEP1oXmSfl3iobtmQ/2dHF5aBHr8aUMwyGZya6OW45G+xtdzmq6HkncefiBt5JU8DVyaWl/nWZbjZCnzAQ==
+"@types/react-dom@^18.0.0":
+  version "18.0.10"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.10.tgz#3b66dec56aa0f16a6cc26da9e9ca96c35c0b4352"
+  integrity sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==
   dependencies:
     "@types/react" "*"
 
@@ -9585,14 +9585,13 @@ react-datepicker@^4.8.0:
     react-onclickoutside "^6.12.0"
     react-popper "^2.2.5"
 
-react-dom@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
-  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+react-dom@^18.0.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "^0.20.2"
+    scheduler "^0.23.0"
 
 react-error-boundary@^3.1.0:
   version "3.1.4"
@@ -9904,13 +9903,12 @@ react-virtuoso@^3.1.3:
     "@virtuoso.dev/react-urx" "^0.2.12"
     "@virtuoso.dev/urx" "^0.2.12"
 
-react@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
-  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+react@^18.0.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 reactcss@^1.2.0:
   version "1.2.3"
@@ -10355,13 +10353,12 @@ saxes@^6.0.0:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@^0.20.2:
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
-  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 schema-utils@*, schema-utils@^3.0, schema-utils@^3.0.0, schema-utils@^3.1.0, schema-utils@^3.1.1:
   version "3.1.1"