feat: react 18

jest.config.ts

@@ -236,7 +236,6 @@ const config: Config.InitialOptions = {
   setupFilesAfterEnv: [
     '<rootDir>/tests/js/setup.ts',
     '<rootDir>/tests/js/setupFramework.ts',
-    '@testing-library/jest-dom/extend-expect',
   ],
   testMatch: testMatch || ['<rootDir>/static/**/?(*.)+(spec|test).[jt]s?(x)'],
   testPathIgnorePatterns: ['<rootDir>/tests/sentry/lang/javascript/'],

package.json

@@ -18,10 +18,10 @@
     "@babel/runtime": "~7.21.0",
     "@dnd-kit/core": "^3.1.1",
     "@dnd-kit/sortable": "^4.0.0",
-    "@emotion/babel-plugin": "^11.10.5",
-    "@emotion/css": "^11.10.5",
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
+    "@emotion/babel-plugin": "^11.11.0",
+    "@emotion/css": "^11.11.2",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@monaco-editor/react": "^4.4.5",
     "@popperjs/core": "^2.11.5",
     "@react-aria/button": "^3.7.2",
@@ -75,9 +75,9 @@
     "@types/papaparse": "^5.3.5",
     "@types/pegjs": "^0.10.3",
     "@types/prismjs": "^1.26.0",
-    "@types/react": "~17.0.62",
+    "@types/react": "~18.2.28",
     "@types/react-date-range": "^1.4.4",
-    "@types/react-dom": "~17.0.20",
+    "@types/react-dom": "~18.2.13",
     "@types/react-grid-layout": "^1.3.2",
     "@types/react-mentions": "4.1.6",
     "@types/react-router": "^3.0.22",
@@ -142,10 +142,10 @@
     "prop-types": "^15.8.1",
     "qrcode.react": "^3.1.0",
     "query-string": "7.0.1",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "react-autosize-textarea": "7.1.0",
     "react-date-range": "^1.4.0",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
     "react-grid-layout": "^1.3.4",
     "react-lazyload": "^2.3.0",
     "react-mentions": "4.4.2",
@@ -176,10 +176,9 @@
     "@sentry/jest-environment": "^4.0.0",
     "@sentry/profiling-node": "^1.2.0",
     "@styled/typescript-styled-plugin": "^1.0.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
     "@types/node": "^18.14.0",
     "babel-gettext-extractor": "^4.1.3",
     "babel-jest": "^29.6.2",

static/app/components/dropdownLink.spec.tsx

@@ -1,9 +1,4 @@
-import {
-  render,
-  screen,
-  userEvent,
-  waitForElementToBeRemoved,
-} from 'sentry-test/reactTestingLibrary';
+import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import DropdownLink from 'sentry/components/dropdownLink';
 import {MENU_CLOSE_DELAY} from 'sentry/constants';
@@ -79,7 +74,7 @@ describe('DropdownLink', function () {
         // Click outside
         await userEvent.click(screen.getByTestId('outside-element'), {delay: null});
 
-        await waitForElementToBeRemoved(() => screen.queryByText('hi'));
+        await waitFor(() => expect(screen.queryByText('hi')).not.toBeInTheDocument());
       });
 
       it('closes when dropdown actor button is clicked', async function () {

static/app/components/onboardingWizard/useOnboardingDocs.spec.tsx

@@ -1,5 +1,5 @@
 import {initializeOrg} from 'sentry-test/initializeOrg';
-import {reactHooks} from 'sentry-test/reactTestingLibrary';
+import {reactHooks, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import useOnboardingDocs from 'sentry/components/onboardingWizard/useOnboardingDocs';
 import {
@@ -39,7 +39,7 @@ describe('useOnboardingDocs', function () {
       });
     });
 
-    const {result, waitForNextUpdate} = reactHooks.renderHook(useOnboardingDocs, {
+    const {result} = reactHooks.renderHook(useOnboardingDocs, {
       initialProps: {
         project,
         docKeys,
@@ -49,7 +49,8 @@ describe('useOnboardingDocs', function () {
       },
       wrapper,
     });
-    await waitForNextUpdate();
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
     const {docContents, isLoading, hasOnboardingContents} = result.current;
 
     expect(isLoading).toEqual(false);

static/app/components/replays/useReplaysCount.tsx

@@ -21,7 +21,7 @@ function useReplaysCount({
   organization,
   replayIds,
   transactionNames,
-}: Options) {
+}: Options): CountState {
   const api = useApi();
 
   const [replayCounts, setReplayCounts] = useState<CountState>({});

static/app/utils/profiling/hooks/useProfileEvents.spec.tsx

@@ -2,7 +2,7 @@ import {ReactNode} from 'react';
 
 import {initializeOrg} from 'sentry-test/initializeOrg';
 import {makeTestQueryClient} from 'sentry-test/queryClient';
-import {reactHooks} from 'sentry-test/reactTestingLibrary';
+import {reactHooks, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import {EventsResults} from 'sentry/utils/profiling/hooks/types';
 import {useProfileEvents} from 'sentry/utils/profiling/hooks/useProfileEvents';
@@ -40,7 +40,7 @@ describe('useProfileEvents', function () {
       match: [MockApiClient.matchQuery({dataset: 'profiles'})],
     });
 
-    const {result, waitFor} = reactHooks.renderHook(useProfileEvents, {
+    const {result} = reactHooks.renderHook(useProfileEvents, {
       wrapper: TestContext,
       initialProps: {
         fields,
@@ -63,7 +63,7 @@ describe('useProfileEvents', function () {
       match: [MockApiClient.matchQuery({dataset: 'profiles'})],
     });
 
-    const {result, waitFor} = reactHooks.renderHook(useProfileEvents, {
+    const {result} = reactHooks.renderHook(useProfileEvents, {
       wrapper: TestContext,
       initialProps: {
         fields: ['count()'],
@@ -73,7 +73,7 @@ describe('useProfileEvents', function () {
     });
 
     await waitFor(() => result.current.isError);
-    expect(result.current.status).toEqual('error');
+    await waitFor(() => expect(result.current.status).toEqual('error'));
   });
 });
 

static/app/utils/profiling/hooks/useProfileFunctions.spec.tsx

@@ -2,7 +2,7 @@ import {ReactElement, useMemo} from 'react';
 
 import {initializeOrg} from 'sentry-test/initializeOrg';
 import {makeTestQueryClient} from 'sentry-test/queryClient';
-import {reactHooks} from 'sentry-test/reactTestingLibrary';
+import {reactHooks, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import {useProfileFunctions} from 'sentry/utils/profiling/hooks/useProfileFunctions';
 import {QueryClientProvider} from 'sentry/utils/queryClient';
@@ -70,15 +70,16 @@ describe('useProfileFunctions', function () {
     );
     expect(hook.result.current.isLoading).toEqual(true);
     expect(hook.result.current.isFetched).toEqual(false);
-    await hook.waitForNextUpdate();
-    expect(hook.result.current).toMatchObject(
-      expect.objectContaining({
-        isLoading: false,
-        isFetched: true,
-        data: expect.objectContaining({
-          data: expect.any(Array),
-        }),
-      })
-    );
+    await waitFor(() => {
+      expect(hook.result.current).toMatchObject(
+        expect.objectContaining({
+          isLoading: false,
+          isFetched: true,
+          data: expect.objectContaining({
+            data: expect.any(Array),
+          }),
+        })
+      );
+    });
   });
 });

static/app/utils/useDismissAlert.spec.tsx

@@ -27,7 +27,7 @@ describe('useDismissAlert', () => {
 
     const initialRef = result.current.dismiss;
 
-    rerender();
+    rerender({key});
 
     expect(result.current.dismiss).toEqual(initialRef);
   });

static/app/utils/useMembers.spec.tsx

@@ -1,6 +1,6 @@
 import {Organization} from 'sentry-fixture/organization';
 
-import {reactHooks} from 'sentry-test/reactTestingLibrary';
+import {reactHooks, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import MemberListStore from 'sentry/stores/memberListStore';
 import OrganizationStore from 'sentry/stores/organizationStore';
@@ -36,7 +36,7 @@ describe('useMembers', function () {
       body: [{user: newUser2}, {user: newUser3}],
     });
 
-    const {result, waitFor} = reactHooks.renderHook(useMembers);
+    const {result} = reactHooks.renderHook(useMembers);
     const {onSearch} = result.current;
 
     // Works with append
@@ -70,7 +70,7 @@ describe('useMembers', function () {
       body: [{user: userFoo}],
     });
 
-    const {result, waitFor} = reactHooks.renderHook(useMembers, {
+    const {result} = reactHooks.renderHook(useMembers, {
       initialProps: {emails: ['foo@test.com']},
     });
 
@@ -92,7 +92,7 @@ describe('useMembers', function () {
       body: [{user: userFoo}],
     });
 
-    const {result, waitFor} = reactHooks.renderHook(useMembers, {
+    const {result} = reactHooks.renderHook(useMembers, {
       initialProps: {ids: ['10']},
     });
 
@@ -118,7 +118,7 @@ describe('useMembers', function () {
   });
 
   it('correctly returns hasMore before and after store update', async function () {
-    const {result, waitFor} = reactHooks.renderHook(useMembers);
+    const {result} = reactHooks.renderHook(useMembers);
 
     const {members, hasMore} = result.current;
     expect(hasMore).toBe(null);

static/app/utils/useTimeout.spec.tsx

@@ -56,7 +56,7 @@ describe('useTimeout', () => {
 
     const firstRender = {...result.current};
 
-    rerender();
+    rerender({timeMs, onTimeout});
 
     expect(result.current.start).toBe(firstRender.start);
     expect(result.current.cancel).toBe(firstRender.cancel);

static/app/utils/withSentryRouter.tsx

@@ -12,7 +12,7 @@ import {customerDomain, usingCustomerDomain} from 'sentry/constants';
  */
 function withSentryRouter<P extends WithRouterProps>(
   WrappedComponent: React.ComponentType<P>
-) {
+): React.ComponentClass<Omit<P, keyof WithRouterProps>> {
   function WithSentryRouterWrapper(props: P) {
     const {params} = props;
     if (usingCustomerDomain) {

static/app/views/dashboards/widgetBuilder/widgetBuilderDataset.spec.tsx

@@ -1,11 +1,13 @@
 import selectEvent from 'react-select-event';
 import {urlEncode} from '@sentry/utils';
+import MockDate from 'mockdate';
 import {MetricsField} from 'sentry-fixture/metrics';
 import {SessionsField} from 'sentry-fixture/sessions';
 import {Tags} from 'sentry-fixture/tags';
 
 import {initializeOrg} from 'sentry-test/initializeOrg';
 import {
+  act,
   render,
   screen,
   userEvent,
@@ -268,6 +270,7 @@ describe('WidgetBuilder', function () {
     MockApiClient.clearMockResponses();
     jest.clearAllMocks();
     jest.useRealTimers();
+    MockDate.set(new Date(1508208080000));
   });
 
   describe('Release Widgets', function () {
@@ -359,7 +362,7 @@ describe('WidgetBuilder', function () {
     });
 
     it('does not allow sort on tags except release', async function () {
-      jest.useFakeTimers().setSystemTime(new Date('2022-08-02'));
+      MockDate.set(new Date('2022-08-02'));
       renderTestComponent();
 
       expect(
@@ -400,7 +403,7 @@ describe('WidgetBuilder', function () {
     });
 
     it('makes the appropriate sessions call', async function () {
-      jest.useFakeTimers().setSystemTime(new Date('2022-08-02'));
+      MockDate.set(new Date('2022-08-02'));
       renderTestComponent();
 
       expect(
@@ -432,7 +435,7 @@ describe('WidgetBuilder', function () {
     });
 
     it('calls the session endpoint with the right limit', async function () {
-      jest.useFakeTimers().setSystemTime(new Date('2022-08-02'));
+      MockDate.set(new Date('2022-08-02'));
       renderTestComponent();
 
       expect(
@@ -470,7 +473,7 @@ describe('WidgetBuilder', function () {
     });
 
     it('calls sessions api when session.status is selected as a groupby', async function () {
-      jest.useFakeTimers().setSystemTime(new Date('2022-08-02'));
+      MockDate.set(new Date('2022-08-02'));
       renderTestComponent();
 
       expect(
@@ -529,7 +532,7 @@ describe('WidgetBuilder', function () {
     });
 
     it('sets widgetType to release', async function () {
-      jest.useFakeTimers().setSystemTime(new Date('2022-08-02'));
+      MockDate.set(new Date('2022-08-02'));
       renderTestComponent();
 
       await userEvent.click(await screen.findByText('Releases (Sessions, Crash rates)'), {
@@ -601,7 +604,7 @@ describe('WidgetBuilder', function () {
     });
 
     it('adds a function when the only column chosen in a table is a tag', async function () {
-      jest.useFakeTimers().setSystemTime(new Date('2022-08-02'));
+      MockDate.set(new Date('2022-08-02'));
       renderTestComponent();
 
       await userEvent.click(await screen.findByText('Releases (Sessions, Crash rates)'), {
@@ -882,6 +885,8 @@ describe('WidgetBuilder', function () {
           ],
         });
 
+        await act(tick);
+
         await waitFor(() => {
           expect(measurementsMetaMock).toHaveBeenCalled();
         });
@@ -934,6 +939,8 @@ describe('WidgetBuilder', function () {
           ],
         });
 
+        await act(tick);
+
         await waitFor(() => {
           expect(measurementsMetaMock).toHaveBeenCalled();
         });
@@ -980,6 +987,8 @@ describe('WidgetBuilder', function () {
           orgFeatures: [...defaultOrgFeatures, 'dashboards-mep'],
         });
 
+        expect(await screen.findByText('Custom Widget')).toBeInTheDocument();
+
         await waitFor(() => {
           expect(measurementsMetaMock).toHaveBeenCalled();
         });