Merge pull request #662 from nordeck/nic/feat/react-18-upgrade

Upgrade to React 18

.changeset/cold-tools-jog.md

@@ -0,0 +1,7 @@
+---
+'@matrix-widget-toolkit/semantic-ui': major
+'@matrix-widget-toolkit/react': major
+'@matrix-widget-toolkit/mui': major
+---
+
+Upgrade to React 18

.eslintrc.js

@@ -21,7 +21,6 @@ module.exports = {
     '**/lib/**',
     '**/build/**',
     '**/craco.config.js',
-    '**/jest.config.js',
     'scripts/prepack.js',
     'scripts/postpack.js',
     'scripts/publishAllPackages.js',

example-widget-mui/jest.config.js

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 Nordeck IT + Consulting GmbH
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 // Create a jest config from our craco config.
 const { createJestConfig } = require('@craco/craco');
 const cracoConfig = require('./craco.config');

example-widget-mui/package.json

@@ -8,21 +8,20 @@
   "dependencies": {
     "@mui/icons-material": "^5.15.15",
     "@mui/material": "^5.15.15",
-    "@mui/utils": "^5.14.13",
     "@matrix-widget-toolkit/api": "3.3.1",
     "@matrix-widget-toolkit/mui": "1.2.1",
     "@matrix-widget-toolkit/react": "1.0.6",
-    "@reduxjs/toolkit": "^1.9.7",
+    "@reduxjs/toolkit": "^2.2.3",
     "i18next": "^23.11.2",
     "i18next-chained-backend": "^4.6.2",
     "i18next-http-backend": "^2.5.1",
     "joi": "^17.13.0",
     "lodash": "^4.17.21",
     "matrix-widget-api": "^1.6.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-i18next": "^14.1.1",
-    "react-redux": "^8.1.3",
+    "react-redux": "^9.1.0",
     "react-router-dom": "^6.23.0",
     "react-scripts": "5.0.1",
     "react-use": "^17.5.0",
@@ -56,13 +55,13 @@
     "@craco/craco": "^7.1.0",
     "@matrix-widget-toolkit/testing": "2.4.0",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^14.2.2",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^27.5.2",
     "@types/jest-axe": "^3.5.9",
     "@types/node": "^20.8.6",
-    "@types/react": "^17.0.45",
-    "@types/react-dom": "^17.0.16",
+    "@types/react": "^18.2.74",
+    "@types/react-dom": "^18.2.24",
     "i18next-parser": "^8.13.0",
     "jest-axe": "^8.0.0",
     "msw": "^2.2.14",

example-widget-mui/src/AllRoomsPage/AllRoomsPage.test.tsx

@@ -17,7 +17,7 @@
 import { StateEvent } from '@matrix-widget-toolkit/api';
 import { WidgetApiMockProvider } from '@matrix-widget-toolkit/react';
 import { MockedWidgetApi, mockWidgetApi } from '@matrix-widget-toolkit/testing';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { axe } from 'jest-axe';
 import { EventDirection, WidgetEventCapability } from 'matrix-widget-api';
@@ -82,6 +82,13 @@ describe('<AllRoomsPage />', () => {
     await expect(
       screen.findByRole('heading', { name: /all rooms/i }),
     ).resolves.toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: 'Refresh the Room Information' }),
+      ).toBeEnabled();
+    });
+
     expect(await axe(container)).toHaveNoViolations();
   });
 

example-widget-mui/src/AllRoomsPage/AllRoomsPage.tsx

@@ -35,13 +35,12 @@ import {
   ListItemIcon,
   ListItemText,
 } from '@mui/material';
-import { unstable_useId as useId } from '@mui/utils';
 import {
   EventDirection,
   Symbols,
   WidgetEventCapability,
 } from 'matrix-widget-api';
-import { ReactElement } from 'react';
+import { ReactElement, useId } from 'react';
 import { useAsyncRetry } from 'react-use';
 import { NavigationBar } from '../NavigationPage';
 import {

example-widget-mui/src/DicePage/DicePage.test.tsx

@@ -64,6 +64,7 @@ describe('<DicePage />', () => {
     await expect(
       screen.findByRole('heading', { name: /dice/i }),
     ).resolves.toBeInTheDocument();
+
     expect(await axe(container)).toHaveNoViolations();
   });
 

example-widget-mui/src/IdentityPage/IdentityPage.test.tsx

@@ -55,7 +55,8 @@ describe('<IdentityPage />', () => {
     await expect(
       screen.findByRole('heading', { name: /Identity/i }),
     ).resolves.toBeInTheDocument();
-    expect(screen.getByText('Error')).toBeInTheDocument();
+
+    expect(await screen.findByText('Error')).toBeInTheDocument();
     expect(screen.getByText(/error: .+/i)).toBeInTheDocument();
   });
 
@@ -65,6 +66,7 @@ describe('<IdentityPage />', () => {
     await expect(
       screen.findByRole('heading', { name: /Identity/i }),
     ).resolves.toBeInTheDocument();
+
     expect(await axe(container)).toHaveNoViolations();
   });
 

example-widget-mui/src/InvitationsPage/InvitationsPage.test.tsx

@@ -63,9 +63,11 @@ describe('<InvitationsPage />', () => {
   it('should have no accessibility violations', async () => {
     const { container } = render(<InvitationsPage />, { wrapper });
 
-    await expect(
-      screen.findByRole('heading', { name: 'Invitations' }),
-    ).resolves.toBeInTheDocument();
+    expect(
+      await screen.findByRole('heading', { name: 'Invitations' }),
+    ).toBeInTheDocument();
+
+    expect(await screen.findByRole('progressbar')).toBeInTheDocument();
 
     await waitFor(() => {
       expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();

example-widget-mui/src/InvitationsPage/InvitationsPage.tsx

@@ -36,10 +36,9 @@ import {
   Stack,
   TextField,
 } from '@mui/material';
-import { unstable_useId as useId } from '@mui/utils';
 import { isError } from 'lodash';
 import { MatrixCapabilities } from 'matrix-widget-api';
-import { ReactElement, useEffect, useState } from 'react';
+import { ReactElement, useEffect, useId, useState } from 'react';
 import { NavigationBar } from '../NavigationPage';
 
 /**

example-widget-mui/src/ModalPage/ModalDialog.test.tsx

@@ -62,6 +62,7 @@ describe('<ModalDialog />', () => {
     const { container } = render(<ModalDialog />, { wrapper });
 
     await expect(screen.findByText(/a title/i)).resolves.toBeInTheDocument();
+
     expect(await axe(container)).toHaveNoViolations();
   });
 

example-widget-mui/src/NavigationPage/NavigationPage.tsx

@@ -15,8 +15,7 @@
  */
 
 import { Box, List, ListItemButton, ListItemText } from '@mui/material';
-import { unstable_useId as useId } from '@mui/utils';
-import { ReactElement } from 'react';
+import { ReactElement, useId } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 

example-widget-mui/src/PowerLevelsPage/PowerLevelsPage.test.tsx

@@ -20,7 +20,7 @@ import { render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { axe } from 'jest-axe';
 import { EventDirection, WidgetEventCapability } from 'matrix-widget-api';
-import { ComponentType, PropsWithChildren } from 'react';
+import { ComponentType, PropsWithChildren, act } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { StoreProvider } from '../store';
 import { PowerLevelsPage } from './PowerLevelsPage';
@@ -91,7 +91,7 @@ describe('<PowerLevelsPage />', () => {
     const listbox = await screen.findByRole('listbox', { name: 'Username' });
 
     await userEvent.click(
-      within(listbox).getByRole('option', {
+      await within(listbox).findByRole('option', {
         name: '@another-user',
         selected: true,
         checked: true,
@@ -111,10 +111,18 @@ describe('<PowerLevelsPage />', () => {
   it('should have no accessibility violations', async () => {
     const { container } = render(<PowerLevelsPage />, { wrapper });
 
-    await expect(
-      screen.findByRole('heading', { name: /room power levels/i }),
-    ).resolves.toBeInTheDocument();
-    expect(await axe(container)).toHaveNoViolations();
+    expect(
+      await screen.findByRole('heading', { name: /room power levels/i }),
+    ).toBeInTheDocument();
+
+    expect(
+      await screen.findByRole('combobox', { name: 'Username' }),
+    ).toBeInTheDocument();
+
+    // TODO: this should not be needed to wrap in act, we should review this later
+    await act(async () => {
+      expect(await axe(container)).toHaveNoViolations();
+    });
   });
 
   it('should select another user', async () => {
@@ -218,8 +226,13 @@ describe('<PowerLevelsPage />', () => {
     });
     const demoteButton = screen.getByRole('button', { name: /demote/i });
 
-    expect(promoteButton).toBeDisabled();
-    expect(demoteButton).toBeDisabled();
+    await waitFor(() => {
+      expect(promoteButton).toBeDisabled();
+    });
+
+    await waitFor(() => {
+      expect(demoteButton).toBeDisabled();
+    });
   });
 
   it('should promote the user', async () => {
@@ -235,8 +248,13 @@ describe('<PowerLevelsPage />', () => {
 
     await userEvent.click(promoteButton);
 
-    expect(promoteButton).toBeDisabled();
-    expect(demoteButton).not.toBeDisabled();
+    await waitFor(() => {
+      expect(promoteButton).toBeDisabled();
+    });
+
+    await waitFor(() => {
+      expect(demoteButton).not.toBeDisabled();
+    });
 
     expect(widgetApi.sendStateEvent).toBeCalledWith('m.room.power_levels', {
       users: {
@@ -274,7 +292,10 @@ describe('<PowerLevelsPage />', () => {
 
     await userEvent.click(demoteButton);
 
-    expect(promoteButton).not.toBeDisabled();
+    await waitFor(() => {
+      expect(promoteButton).not.toBeDisabled();
+    });
+
     expect(demoteButton).toBeDisabled();
 
     expect(widgetApi.sendStateEvent).toBeCalledWith('m.room.power_levels', {

example-widget-mui/src/PowerLevelsPage/PowerLevelsPage.tsx

@@ -42,10 +42,9 @@ import {
   MenuItem,
   Select,
 } from '@mui/material';
-import { unstable_useId as useId } from '@mui/utils';
 import { first } from 'lodash';
 import { EventDirection, WidgetEventCapability } from 'matrix-widget-api';
-import { ReactElement, useEffect, useState } from 'react';
+import { ReactElement, useEffect, useId, useState } from 'react';
 import { STATE_EVENT_ROOM_NAME } from '../events';
 import { NavigationBar } from '../NavigationPage';
 import { StoreProvider } from '../store';

example-widget-mui/src/PowerLevelsPage/roomMembersApi.ts

@@ -26,10 +26,8 @@ import { ThunkExtraArgument, baseApi } from '../store';
 
 // Use an entity adapter to efficiently interact with a collection of events.
 // The adapter provides selectors and reducers to read and manipulate a state.
-const roomMembersEntityAdapter = createEntityAdapter<
-  StateEvent<RoomMemberStateEventContent>
->({
-  selectId: (event) => event.state_key,
+const roomMembersEntityAdapter = createEntityAdapter({
+  selectId: (event: StateEvent<RoomMemberStateEventContent>) => event.state_key,
 });
 
 /**
@@ -42,7 +40,7 @@ export const roomMembersApi = baseApi.injectEndpoints({
   endpoints: (builder) => ({
     /** Receive the room members of the current room */
     getRoomMembers: builder.query<
-      EntityState<StateEvent<RoomMemberStateEventContent>>,
+      EntityState<StateEvent<RoomMemberStateEventContent>, string>,
       void
     >({
       // do the initial loading

example-widget-mui/src/RelationsPage/RelationsPage.test.tsx

@@ -81,7 +81,7 @@ describe('<RelationsPage />', () => {
     expect(screen.getByRole('button', { name: 'Send' })).toBeInTheDocument();
 
     const list = screen.getByRole('list', { name: 'Messages' });
-    const listitem = within(list).getByRole('listitem', {
+    const listitem = await within(list).findByRole('listitem', {
       name: 'My message @user-id',
     });
 
@@ -106,11 +106,14 @@ describe('<RelationsPage />', () => {
   it('should have no accessibility violations', async () => {
     const { container } = render(<RelationsPage />, { wrapper });
 
-    await expect(
-      screen.findByRole('heading', { name: 'Event Relations' }),
-    ).resolves.toBeInTheDocument();
+    expect(
+      screen.getByRole('heading', { name: 'Event Relations' }),
+    ).toBeInTheDocument();
 
-    expect(await axe(container)).toHaveNoViolations();
+    // TODO: this should not be needed to wrap in act, we should review this later
+    await act(async () => {
+      expect(await axe(container)).toHaveNoViolations();
+    });
   });
 
   it('should send a new message', async () => {

example-widget-mui/src/RoomPage/RoomPage.test.tsx

@@ -71,9 +71,12 @@ describe('<RoomPage />', () => {
   it('should have no accessibility violations', async () => {
     const { container } = render(<RoomPage />, { wrapper });
 
-    await expect(
-      screen.findByRole('heading', { name: /room admin tool/i }),
-    ).resolves.toBeInTheDocument();
+    await waitFor(() => {
+      expect(
+        screen.getByRole('heading', { name: /room admin tool/i }),
+      ).toBeInTheDocument();
+    });
+
     expect(await axe(container)).toHaveNoViolations();
   });
 

example-widget-mui/src/ThemePage/ThemePage.test.tsx

@@ -47,6 +47,7 @@ describe('<ThemePage>', () => {
     await expect(
       screen.findByRole('heading', { name: /theme/i }),
     ).resolves.toBeInTheDocument();
+
     expect(await axe(container)).toHaveNoViolations();
   }, 15000);
 

example-widget-mui/src/ThemePage/ThemePage.tsx

@@ -59,11 +59,11 @@ import {
   Tooltip,
   Typography,
 } from '@mui/material';
-import { unstable_useId as useId } from '@mui/utils';
 import {
   MouseEventHandler,
   PropsWithChildren,
   ReactElement,
+  useId,
   useState,
 } from 'react';
 import { NavigationBar } from '../NavigationPage';