diff --git a/test/components/structures/RightPanel-test.tsx b/test/components/structures/RightPanel-test.tsx
index 596c49009d..40ba8ac4ae 100644
--- a/test/components/structures/RightPanel-test.tsx
+++ b/test/components/structures/RightPanel-test.tsx
@@ -16,7 +16,8 @@ limitations under the License.
import React from "react";
// eslint-disable-next-line deprecate/import
-import { mount } from "enzyme";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
import { jest } from "@jest/globals";
import { mocked, MockedObject } from "jest-mock";
import { MatrixClient } from "matrix-js-sdk/src/client";
@@ -33,8 +34,6 @@ import { RightPanelPhases } from "../../../src/stores/right-panel/RightPanelStor
import RightPanelStore from "../../../src/stores/right-panel/RightPanelStore";
import { UPDATE_EVENT } from "../../../src/stores/AsyncStore";
import { WidgetLayoutStore } from "../../../src/stores/widgets/WidgetLayoutStore";
-import RoomSummaryCard from "../../../src/components/views/right_panel/RoomSummaryCard";
-import MemberList from "../../../src/components/views/rooms/MemberList";
import { SdkContextClass } from "../../../src/contexts/SDKContext";
const RightPanelBase = wrapInMatrixClientContext(_RightPanel);
@@ -111,15 +110,14 @@ describe("RightPanel", () => {
});
await viewedRoom;
- const wrapper = mount();
- expect(wrapper.find(RoomSummaryCard).exists()).toEqual(true);
+ const { container } = render();
+ expect(container.getElementsByClassName("mx_RoomSummaryCard")).toHaveLength(1);
const switchedPhases = waitForRpsUpdate();
- wrapper.find("AccessibleButton.mx_RoomSummaryCard_icon_people").simulate("click");
+ userEvent.click(screen.getByText(/people/i));
await switchedPhases;
- wrapper.update();
- expect(wrapper.find(MemberList).exists()).toEqual(true);
+ expect(container.getElementsByClassName("mx_MemberList")).toHaveLength(1);
});
it("renders info from only one room during room changes", async () => {
@@ -154,7 +152,7 @@ describe("RightPanel", () => {
await spinUpStores();
// Run initial render with room 1, and also running lifecycle methods
- const wrapper = mount();
+ const { container, rerender } = render();
// Wait for RPS room 1 updates to fire
const rpsUpdated = waitForRpsUpdate();
dis.dispatch({
@@ -162,31 +160,26 @@ describe("RightPanel", () => {
room_id: "r1",
});
await rpsUpdated;
+ await waitFor(() => expect(screen.queryByTestId("spinner")).not.toBeInTheDocument());
- // After all that setup, now to the interesting part...
- // We want to verify that as we change to room 2, we should always have
- // the correct right panel state for whichever room we are showing.
- const instance = wrapper.find(_RightPanel).instance() as _RightPanel;
- const rendered = new Promise((resolve) => {
- jest.spyOn(instance, "render").mockImplementation(() => {
- const { props, state } = instance;
- if (props.room.roomId === "r2" && state.phase === RightPanelPhases.RoomMemberList) {
- throw new Error("Tried to render room 1 state for room 2");
- }
- if (props.room.roomId === "r2" && state.phase === RightPanelPhases.RoomSummary) {
- resolve();
- }
- return null;
- });
- });
+ // room one will be in the RoomMemberList phase - confirm this is rendered
+ expect(container.getElementsByClassName("mx_MemberList")).toHaveLength(1);
- // Switch to room 2
+ // wait for RPS room 2 updates to fire, then rerender
+ const _rpsUpdated = waitForRpsUpdate();
dis.dispatch({
action: Action.ViewRoom,
room_id: "r2",
});
- wrapper.setProps({ room: r2 });
+ await _rpsUpdated;
+ rerender();
- await rendered;
+ // After all that setup, now to the interesting part...
+ // We want to verify that as we change to room 2, we should always have
+ // the correct right panel state for whichever room we are showing, so we
+ // confirm we do not have the MemberList class on the page and that we have
+ // the expected room title
+ expect(container.getElementsByClassName("mx_MemberList")).toHaveLength(0);
+ expect(screen.getByRole("heading", { name: "r2" })).toBeInTheDocument();
});
});