Skip to content

Commit f650868

Browse files
AWSHurneytAWSHurneyt
authored
Upgrade to react18. Fixed unit tests to accommodate upgrade. (#419)
* Upgrade to react18. Fixed unit tests to accommodate upgrade. Signed-off-by: Thomas Hurney <hurneyt@amazon.com> * Fixed unit test. Signed-off-by: Thomas Hurney <hurneyt@amazon.com> --------- Signed-off-by: Thomas Hurney <hurneyt@amazon.com>
1 parent ccddfb0 commit f650868

22 files changed

+49
-92
lines changed

‎package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@
2121
"postbuild": "echo Renaming build artifact to [$npm_package_config_zip_name-$npm_package_version.zip] && mv build/$npm_package_config_id*.zip build/$npm_package_config_zip_name-$npm_package_version.zip"
2222
},
2323
"devDependencies": {
24-
"@types/enzyme-adapter-react-16": "^1.0.6",
2524
"@types/showdown": "^1.9.3",
2625
"cypress": "^13.6.0",
2726
"enzyme-adapter-react-16": "^1.15.5",
@@ -34,4 +33,4 @@
3433
"@cypress/request": "^3.0.0",
3534
"form-data": "4.0.4"
3635
}
37-
}
36+
}

‎public/application.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
*/
55

66
import React from 'react';
7-
import ReactDOM from 'react-dom';
7+
import { createRoot } from 'react-dom/client';
88
import { HashRouter as Router, Route } from 'react-router-dom';
99
import { AppMountParameters, CoreStart } from '../../../src/core/public';
1010
import { CoreServicesContext } from './components/coreServices';
@@ -19,8 +19,8 @@ export const renderApp = (
1919
pluginStartDependencies: AppPluginStartDependencies,
2020
defaultRoute?: string,
2121
) => {
22-
23-
ReactDOM.render(
22+
const root = createRoot(params.element);
23+
root.render(
2424
<Router>
2525
<Route
2626
render={(props) => (
@@ -35,9 +35,8 @@ export const renderApp = (
3535
</CoreServicesContext.Provider>
3636
)}
3737
/>
38-
</Router>,
39-
params.element
38+
</Router>
4039
);
4140

42-
return () => ReactDOM.unmountComponentAtNode(params.element);
41+
return () => root.unmount();
4342
};

‎public/components/PageHeader/PageHeader.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,16 @@ import { getApplication, getNavigationUI, getUseUpdatedUx } from '../../services
1313
import { useUpdateUrlWithDataSourceProperties } from '../MDSEnabledComponent/MDSEnabledComponent';
1414

1515
export interface PageHeaderProps {
16+
data: string;
17+
children?: React.ReactNode;
1618
appRightControls?: TopNavControlData[];
1719
appBadgeControls?: TopNavControlData[];
1820
appDescriptionControls?: (TopNavControlDescriptionData | TopNavControlLinkData)[];
1921
appLeftControls?: TopNavControlData[];
2022
}
2123

2224
const PageHeader: React.FC<PageHeaderProps> = ({
25+
data,
2326
children,
2427
appBadgeControls,
2528
appRightControls,
@@ -42,4 +45,4 @@ const PageHeader: React.FC<PageHeaderProps> = ({
4245
);
4346
};
4447

45-
export default PageHeader;
48+
export default PageHeader;

‎public/pages/Channels/__tests__/ChannelDetails.test.tsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,11 @@
33
* SPDX-License-Identifier: Apache-2.0
44
*/
55

6-
import { fireEvent, render, waitFor } from '@testing-library/react';
6+
import { fireEvent, render, waitFor, act } from '@testing-library/react';
77
import { configure } from 'enzyme';
8-
import Adapter from 'enzyme-adapter-react-16';
8+
import Adapter from '@cfaester/enzyme-adapter-react-18';
99
import React from 'react';
10-
import ReactDOM from 'react-dom';
11-
import { act } from 'react-dom/test-utils';
10+
import { createRoot } from 'react-dom/client';
1211
import { RouteComponentProps } from 'react-router-dom';
1312
import { MOCK_DATA } from '../../../../test/mocks/mockData';
1413
import {
@@ -49,16 +48,16 @@ describe('<ChannelDetails/> spec', () => {
4948
};
5049
let container = document.createElement('div');
5150

51+
const root = createRoot(container);
5252
act(() => {
53-
ReactDOM.render(
53+
root.render(
5454
<ServicesContext.Provider value={notificationServiceMock}>
5555
<CoreServicesContext.Provider value={coreServicesMock}>
5656
<ChannelDetails
5757
{...(props as RouteComponentProps<{ id: string }>)}
5858
/>
5959
</CoreServicesContext.Provider>
60-
</ServicesContext.Provider>,
61-
container
60+
</ServicesContext.Provider>
6261
);
6362
});
6463
await waitFor(() => {
@@ -76,16 +75,16 @@ describe('<ChannelDetails/> spec', () => {
7675
};
7776
let container = document.createElement('div');
7877

78+
const root = createRoot(container);
7979
act(() => {
80-
ReactDOM.render(
80+
root.render(
8181
<ServicesContext.Provider value={notificationServiceMock}>
8282
<CoreServicesContext.Provider value={coreServicesMock}>
8383
<ChannelDetails
8484
{...(props as RouteComponentProps<{ id: string }>)}
8585
/>
8686
</CoreServicesContext.Provider>
87-
</ServicesContext.Provider>,
88-
container
87+
</ServicesContext.Provider>
8988
);
9089
});
9190
await waitFor(() => {

‎public/pages/Channels/__tests__/ChannelDetailsActions.test.tsx‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
* SPDX-License-Identifier: Apache-2.0
44
*/
55

6-
import { render } from '@testing-library/react';
6+
import { render, act, fireEvent, waitFor } from '@testing-library/react';
77
import { configure } from 'enzyme';
8-
import Adapter from 'enzyme-adapter-react-16';
8+
import Adapter from '@cfaester/enzyme-adapter-react-18';
99
import React from 'react';
1010
import { MOCK_DATA } from '../../../../test/mocks/mockData';
1111
import {
@@ -36,7 +36,7 @@ describe('<ChannelDetailsActions /> spec', () => {
3636
expect(utils.container.firstChild).toMatchSnapshot();
3737
});
3838

39-
it('opens popover', () => {
39+
it('opens popover', async () => {
4040
const channel = MOCK_DATA.chime;
4141
const utils = render(
4242
<ServicesContext.Provider value={notificationServiceMock}>
@@ -45,11 +45,11 @@ describe('<ChannelDetailsActions /> spec', () => {
4545
</CoreServicesContext.Provider>
4646
</ServicesContext.Provider>
4747
);
48-
utils.getByText('Actions').click();
48+
await act(async () => fireEvent.click(utils.getByText('Actions')));
4949
expect(utils.container.firstChild).toMatchSnapshot();
5050
});
5151

52-
it('clicks buttons in popover', () => {
52+
it('clicks buttons in popover', async () => {
5353
const channel = MOCK_DATA.chime;
5454
const utils = render(
5555
<ServicesContext.Provider value={notificationServiceMock}>
@@ -58,12 +58,15 @@ describe('<ChannelDetailsActions /> spec', () => {
5858
</CoreServicesContext.Provider>
5959
</ServicesContext.Provider>
6060
);
61-
utils.getByText('Actions').click();
62-
utils.getByText('Edit').click();
63-
utils.getByText('Actions').click();
64-
utils.getByText('Send test message').click();
65-
utils.getByText('Actions').click();
66-
utils.getByText('Delete').click();
61+
await act(async () => fireEvent.click(utils.getByText('Actions')));
62+
await waitFor(() => expect(utils.getByText('Edit')).toBeTruthy());
63+
await act(async () => fireEvent.click(utils.getByText('Edit')));
64+
await act(async () => fireEvent.click(utils.getByText('Actions')));
65+
await waitFor(() => expect(utils.getByText('Send test message')).toBeTruthy());
66+
await act(async () => fireEvent.click(utils.getByText('Send test message')));
67+
await act(async () => fireEvent.click(utils.getByText('Actions')));
68+
await waitFor(() => expect(utils.getByText('Delete')).toBeTruthy());
69+
await act(async () => fireEvent.click(utils.getByText('Delete')));
6770
expect(utils.container.firstChild).toMatchSnapshot();
6871
});
6972
});

‎public/pages/Channels/__tests__/ChannelSettingsDetails.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
import { render } from '@testing-library/react';
77
import { configure } from 'enzyme';
8-
import Adapter from 'enzyme-adapter-react-16';
8+
import Adapter from '@cfaester/enzyme-adapter-react-18';
99
import React from 'react';
1010
import { MOCK_DATA } from '../../../../test/mocks/mockData';
1111
import { ChannelSettingsDetails } from '../components/details/ChannelSettingsDetails';

‎public/pages/Channels/__tests__/DetailsListModal.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
import { render } from '@testing-library/react';
77
import { configure, mount } from 'enzyme';
8-
import Adapter from 'enzyme-adapter-react-16';
8+
import Adapter from '@cfaester/enzyme-adapter-react-18';
99
import React from 'react';
1010
import { DetailsListModal } from '../components/modals/DetailsListModal';
1111

‎public/pages/Channels/__tests__/DetailsTableModal.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
*/
55

66
import { configure, mount } from 'enzyme';
7-
import Adapter from 'enzyme-adapter-react-16';
7+
import Adapter from '@cfaester/enzyme-adapter-react-18';
88
import React from 'react';
99
import { DetailsTableModal } from '../components/modals/DetailsTableModal';
1010

‎public/pages/Channels/__tests__/__snapshots__/ChannelDetailsActions.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
exports[`<ChannelDetailsActions /> spec clicks buttons in popover 1`] = `
44
<div
5-
class="euiPopover euiPopover--anchorDownCenter"
5+
class="euiPopover euiPopover--anchorDownCenter euiPopover-isOpen"
66
>
77
<div
88
class="euiPopover__anchor"

‎public/pages/CreateChannel/__tests__/ChimeSettings.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
import { fireEvent, render } from '@testing-library/react';
77
import { configure } from 'enzyme';
8-
import Adapter from 'enzyme-adapter-react-16';
8+
import Adapter from '@cfaester/enzyme-adapter-react-18';
99
import React from 'react';
1010
import { ChimeSettings } from '../components/ChimeSettings';
1111
import { CreateChannelContext } from '../CreateChannel';

0 commit comments

Comments
 (0)