diff --git a/src/components/ChannelList/__tests__/ChannelList.test.js b/src/components/ChannelList/__tests__/ChannelList.test.js
index b18f4641d..b9ce92b96 100644
--- a/src/components/ChannelList/__tests__/ChannelList.test.js
+++ b/src/components/ChannelList/__tests__/ChannelList.test.js
@@ -48,6 +48,21 @@ const channelsQueryStateMock = {
   setQueryInProgress: jest.fn(),
 };
 
+const ChatContextOverrider = ({ chatContext, children }) => {
+  const existingContext = useChatContext();
+  return (
+    <ChatContext.Provider
+      value={{
+        ...existingContext,
+        channelsQueryState: channelsQueryStateMock,
+        ...chatContext,
+      }}
+    >
+      {children}
+    </ChatContext.Provider>
+  );
+};
+
 /**
  * We use the following custom UI components for preview and list.
  * If we use ChannelPreviewMessenger or ChannelPreviewLastMessage here, then changes
@@ -116,6 +131,7 @@ describe('ChannelList', () => {
               client: chatClient,
               closeMobileNav,
               navOpen: true,
+              setChannels: jest.fn(),
             }}
           >
             <ChannelList {...props} />
@@ -147,6 +163,7 @@ describe('ChannelList', () => {
               client: chatClient,
               closeMobileNav,
               navOpen: false,
+              setChannels: jest.fn(),
             }}
           >
             <ChannelList {...props} />
@@ -392,6 +409,7 @@ describe('ChannelList', () => {
 
   describe('Default and custom active channel', () => {
     let setActiveChannel;
+    let setChannels;
     const watchersConfig = { limit: 20, offset: 0 };
     const testSetActiveChannelCall = (channelInstance) =>
       waitFor(() => {
@@ -402,6 +420,7 @@ describe('ChannelList', () => {
 
     beforeEach(() => {
       setActiveChannel = jest.fn();
+      setChannels = jest.fn();
       useMockedApis(chatClient, [queryChannelsApi([testChannel1, testChannel2])]);
     });
 
@@ -412,6 +431,7 @@ describe('ChannelList', () => {
             channelsQueryState: channelsQueryStateMock,
             client: chatClient,
             setActiveChannel,
+            setChannels,
           }}
         >
           <ChannelList
@@ -443,6 +463,7 @@ describe('ChannelList', () => {
             channelsQueryState: channelsQueryStateMock,
             client: chatClient,
             setActiveChannel,
+            setChannels,
           }}
         >
           <ChannelList
@@ -466,41 +487,40 @@ describe('ChannelList', () => {
     });
 
     it('should render channel with id `customActiveChannel` at top of the list', async () => {
-      const { container, getAllByRole, getByRole, getByTestId } = render(
-        <ChatContext.Provider
-          value={{
-            channelsQueryState: channelsQueryStateMock,
-            client: chatClient,
-            setActiveChannel,
-          }}
-        >
-          <ChannelList
-            customActiveChannel={testChannel2.channel.id}
-            filters={{}}
-            List={ChannelListComponent}
-            options={{ presence: true, state: true, watch: true }}
-            Preview={ChannelPreviewComponent}
-            setActiveChannel={setActiveChannel}
-            setActiveChannelOnMount
-            watchers={watchersConfig}
-          />
-        </ChatContext.Provider>,
-      );
+      useMockedApis(chatClient, [getOrCreateChannelApi(testChannel2)]);
+      jest
+        .spyOn(chatClient, 'queryChannels')
+        .mockImplementationOnce(() =>
+          chatClient.hydrateActiveChannels([testChannel1, testChannel2]),
+        );
+      await act(async () => {
+        await render(
+          <Chat client={chatClient}>
+            <ChannelList
+              customActiveChannel={testChannel2.channel.id}
+              filters={{}}
+              List={ChannelListComponent}
+              options={{ presence: true, state: true, watch: true }}
+              Preview={ChannelPreviewComponent}
+              watchers={watchersConfig}
+            />
+          </Chat>,
+        );
+      });
 
       // Wait for list of channels to load in DOM.
-      await waitFor(async () => {
-        expect(getByRole('list')).toBeInTheDocument();
-        const items = getAllByRole('listitem');
+      await waitFor(() => {
+        expect(screen.getByRole('list')).toBeInTheDocument();
+        const items = screen.getAllByRole('listitem');
 
         // Get the closest listitem to the channel that received new message.
-        const channelPreview = getByTestId(testChannel2.channel.id).closest(
-          ROLE_LIST_ITEM_SELECTOR,
-        );
+        const channelPreview = screen
+          .getByTestId(testChannel2.channel.id)
+          .closest(ROLE_LIST_ITEM_SELECTOR);
 
         expect(channelPreview.isEqualNode(items[0])).toBe(true);
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
       });
+      jest.restoreAllMocks();
     });
 
     describe('channel search', () => {
@@ -535,20 +555,16 @@ describe('ChannelList', () => {
 
       const renderComponents = (chatContext = {}, channeListProps) =>
         render(
-          <ChatContext.Provider
-            value={{
-              channelsQueryState: channelsQueryStateMock,
-              setActiveChannel,
-              ...chatContext,
-            }}
-          >
-            <ChannelList
-              filters={{}}
-              options={{ presence: true, state: true }}
-              showChannelSearch
-              {...channeListProps}
-            />
-          </ChatContext.Provider>,
+          <Chat client={chatContext.client}>
+            <ChatContextOverrider chatContext={{ ...chatContext, setActiveChannel }}>
+              <ChannelList
+                filters={{}}
+                options={{ presence: true, state: true }}
+                showChannelSearch
+                {...channeListProps}
+              />
+            </ChatContextOverrider>
+          </Chat>,
         );
 
       it.each([['1'], ['2']])(
@@ -1193,19 +1209,20 @@ describe('ChannelList', () => {
       it('should unset activeChannel if it was deleted', async () => {
         const setActiveChannel = jest.fn();
         const { container, getByRole } = render(
-          <ChatContext.Provider
-            value={{
-              channelsQueryState: channelsQueryStateMock,
-              client: chatClient,
-              setActiveChannel,
-            }}
-          >
-            <ChannelList
-              {...channelListProps}
-              channel={{ cid: testChannel1.channel.cid }}
-              setActiveChannel={setActiveChannel}
-            />
-          </ChatContext.Provider>,
+          <Chat client={chatClient}>
+            <ChatContextOverrider
+              chatContext={{
+                channelsQueryState: channelsQueryStateMock,
+                setActiveChannel,
+              }}
+            >
+              <ChannelList
+                {...channelListProps}
+                channel={{ cid: testChannel1.channel.cid }}
+                setActiveChannel={setActiveChannel}
+              />
+            </ChatContextOverrider>
+          </Chat>,
         );
 
         // Wait for list of channels to load in DOM.
@@ -1257,32 +1274,21 @@ describe('ChannelList', () => {
       });
 
       it('should unset activeChannel if it was hidden', async () => {
-        const setActiveChannel = jest.fn();
         const { container, getByRole } = render(
-          <ChatContext.Provider
-            value={{
-              channelsQueryState: channelsQueryStateMock,
-              client: chatClient,
-              setActiveChannel,
-            }}
-          >
-            <ChannelList
-              {...channelListProps}
-              channel={{ cid: testChannel1.channel.cid }}
-              setActiveChannel={setActiveChannel}
-            />
-          </ChatContext.Provider>,
+          <Chat client={chatClient}>
+            <ChannelList {...channelListProps} />
+          </Chat>,
         );
 
-        // Wait for list of channels to load in DOM.
         await waitFor(() => {
+          expect(screen.getByTestId(testChannel1.channel.id)).toBeInTheDocument();
           expect(getByRole('list')).toBeInTheDocument();
         });
 
         act(() => dispatchChannelHiddenEvent(chatClient, testChannel1.channel));
 
         await waitFor(() => {
-          expect(setActiveChannel).toHaveBeenCalledTimes(1);
+          expect(screen.queryByTestId(testChannel1.channel.id)).not.toBeInTheDocument();
         });
         const results = await axe(container);
         expect(results).toHaveNoViolations();