try mocking useCall rather than just useParticipantCount

Author: langleyd

test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx

@@ -96,6 +96,9 @@ describe("RoomHeader", () => {
 
         setCardSpy = jest.spyOn(RightPanelStore.instance, "setCard");
         jest.spyOn(ShieldUtils, "shieldStatusForRoom").mockResolvedValue(ShieldUtils.E2EStatus.Normal);
+        
+        // Mock useCall to return a Call object with stable participants to prevent React dependency errors
+        jest.spyOn(UseCall, 'useCall').mockReturnValue(createMockCall());
     });
 
     afterEach(() => {
@@ -555,15 +558,17 @@ describe("RoomHeader", () => {
 
         it("join button is shown if there is an ongoing call", async () => {
             mockRoomMembers(room, 3);
-            jest.spyOn(UseCall, "useParticipantCount").mockReturnValue(3);
+            // Mock a call with 3 participants instead of mocking useParticipantCount
+            jest.spyOn(UseCall, 'useCall').mockReturnValue(createMockCall(ROOM_ID, 3));
             render(<RoomHeader room={room} />, getWrapper());
             const joinButton = getByLabelText(document.body, "Join");
             expect(joinButton).not.toHaveAttribute("aria-disabled", "true");
         });
 
         it("join button is disabled if there is an other ongoing call", async () => {
             mockRoomMembers(room, 3);
-            jest.spyOn(UseCall, "useParticipantCount").mockReturnValue(3);
+            // Mock a call with 3 participants instead of mocking useParticipantCount
+            jest.spyOn(UseCall, 'useCall').mockReturnValue(createMockCall(ROOM_ID, 3));
             jest.spyOn(CallStore.prototype, "connectedCalls", "get").mockReturnValue(
                 new Set([{ roomId: "some_other_room" } as Call]),
             );
@@ -583,7 +588,8 @@ describe("RoomHeader", () => {
 
         it("close lobby button is shown if there is an ongoing call but we are viewing the lobby", async () => {
             mockRoomMembers(room, 3);
-            jest.spyOn(UseCall, "useParticipantCount").mockReturnValue(3);
+            // Mock a call with 3 participants instead of mocking useParticipantCount
+            jest.spyOn(UseCall, 'useCall').mockReturnValue(createMockCall(ROOM_ID, 3));
             jest.spyOn(SdkContextClass.instance.roomViewStore, "isViewingCall").mockReturnValue(true);
 
             render(<RoomHeader room={room} />, getWrapper());
@@ -789,6 +795,34 @@ describe("RoomHeader", () => {
     });
 });
 
+/**
+ * Creates a mock Call object with stable participants to prevent React dependency errors
+ */
+function createMockCall(roomId: string = "!1:example.org", participantCount: number = 0): Call {
+    const participants = new Map();
+    
+    // Create mock participants with devices
+    for (let i = 0; i < participantCount; i++) {
+        const mockMember = {
+            userId: `@user-${i}:example.org`,
+            name: `Member ${i}`,
+        } as RoomMember;
+        
+        const deviceSet = new Set([`device-${i}`]);
+        participants.set(mockMember, deviceSet);
+    }
+    
+    return {
+        roomId,
+        participants,
+        widget: { id: "test-widget" },
+        connectionState: "disconnected",
+        on: jest.fn(),
+        off: jest.fn(),
+        emit: jest.fn(),
+    } as unknown as Call;
+}
+
 /**
  *
  * @param count the number of users to create