diff --git a/package.json b/package.json
index 2bff2a7b13..dbb6b29b53 100644
--- a/package.json
+++ b/package.json
@@ -90,9 +90,9 @@
"qrcode": "^1.4.4",
"qs": "^6.9.6",
"re-resizable": "^6.9.0",
- "react": "^16.14.0",
+ "react": "^17.0.2",
"react-beautiful-dnd": "^4.0.1",
- "react-dom": "^16.14.0",
+ "react-dom": "^17.0.2",
"react-focus-lock": "^2.5.0",
"react-transition-group": "^4.4.1",
"resize-observer-polyfill": "^1.5.1",
@@ -147,7 +147,7 @@
"chokidar": "^3.5.1",
"concurrently": "^5.3.0",
"enzyme": "^3.11.0",
- "enzyme-adapter-react-16": "^1.15.6",
+ "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
"eslint": "7.18.0",
"eslint-config-matrix-org": "^0.2.0",
"eslint-plugin-babel": "^5.3.1",
@@ -162,7 +162,7 @@
"matrix-mock-request": "^1.2.3",
"matrix-react-test-utils": "^0.2.2",
"matrix-web-i18n": "github:matrix-org/matrix-web-i18n",
- "react-test-renderer": "^16.14.0",
+ "react-test-renderer": "^17.0.2",
"rimraf": "^3.0.2",
"stylelint": "^13.9.0",
"stylelint-config-standard": "^20.0.0",
diff --git a/test/accessibility/RovingTabIndex-test.js b/test/accessibility/RovingTabIndex-test.js
index 5aa93f99f3..7af28043e0 100644
--- a/test/accessibility/RovingTabIndex-test.js
+++ b/test/accessibility/RovingTabIndex-test.js
@@ -16,7 +16,7 @@ limitations under the License.
import '../skinned-sdk'; // Must be first for skinning to work
import React from "react";
-import Adapter from "enzyme-adapter-react-16";
+import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
import { configure, mount } from "enzyme";
import {
diff --git a/test/components/structures/MessagePanel-test.js b/test/components/structures/MessagePanel-test.js
index 4f7fca1759..8f0242eb30 100644
--- a/test/components/structures/MessagePanel-test.js
+++ b/test/components/structures/MessagePanel-test.js
@@ -32,7 +32,7 @@ import Matrix from 'matrix-js-sdk';
const test_utils = require('../../test-utils');
const mockclock = require('../../mock-clock');
-import Adapter from "enzyme-adapter-react-16";
+import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
import { configure, mount } from "enzyme";
import MatrixClientContext from "../../../src/contexts/MatrixClientContext";
@@ -89,7 +89,7 @@ describe('MessagePanel', function() {
DMRoomMap.makeShared();
});
- afterEach(function () {
+ afterEach(function() {
clock.uninstall();
});
@@ -282,7 +282,7 @@ describe('MessagePanel', function() {
it('should show the events', function() {
const res = TestUtils.renderIntoDocument(
- ,
+ ,
);
// just check we have the right number of tiles for now
@@ -310,8 +310,8 @@ describe('MessagePanel', function() {
it('should insert the read-marker in the right place', function() {
const res = TestUtils.renderIntoDocument(
- ,
+ ,
);
const tiles = TestUtils.scryRenderedComponentsWithType(
@@ -328,8 +328,8 @@ describe('MessagePanel', function() {
it('should show the read-marker that fall in summarised events after the summary', function() {
const melsEvents = mkMelsEvents();
const res = TestUtils.renderIntoDocument(
- ,
+ ,
);
const summary = TestUtils.findRenderedDOMComponentWithClass(res, 'mx_EventListSummary');
@@ -346,8 +346,8 @@ describe('MessagePanel', function() {
it('should hide the read-marker at the end of summarised events', function() {
const melsEvents = mkMelsEventsOnly();
const res = TestUtils.renderIntoDocument(
- ,
+ ,
);
const summary = TestUtils.findRenderedDOMComponentWithClass(res, 'mx_EventListSummary');
@@ -370,9 +370,9 @@ describe('MessagePanel', function() {
// first render with the RM in one place
let mp = ReactDOM.render(
- , parentDiv);
+ , parentDiv);
const tiles = TestUtils.scryRenderedComponentsWithType(
mp, sdk.getComponent('rooms.EventTile'));
@@ -386,9 +386,9 @@ describe('MessagePanel', function() {
// now move the RM
mp = ReactDOM.render(
- , parentDiv);
+ , parentDiv);
// now there should be two RM containers
const found = TestUtils.scryRenderedDOMComponentsWithClass(mp, 'mx_RoomView_myReadMarker_container');
@@ -463,7 +463,7 @@ describe('MessagePanel', function() {
expect(isReadMarkerVisible(rm)).toBeFalsy();
});
- it('should render Date separators for the events', function () {
+ it('should render Date separators for the events', function() {
const events = mkOneDayEvents();
const res = mount(