fix: use WithComponents instead of ComponentProvider in tests (#2891)

🚂 #2890 

Two minor follow-up fixes:
- Typings for MessageListWrapper and MessageListItem overridable
components.
- Don't use private ComponentProvider API in tests, use WithComponents
instead.

Author: myandrienko

src/components/MessageList/__tests__/MessageList.test.js

@@ -21,9 +21,9 @@ import { Chat } from '../../Chat';
 import { MessageList } from '../MessageList';
 import { Channel } from '../../Channel';
 import {
-  ComponentProvider,
   useChannelActionContext,
   useMessageContext,
+  WithComponents,
 } from '../../../context';
 import { EmptyStateIndicator as EmptyStateIndicatorMock } from '../../EmptyStateIndicator';
 import { ScrollToBottomButton } from '../ScrollToBottomButton';
@@ -55,9 +55,9 @@ const renderComponent = ({ channelProps, chatClient, components = {}, msgListPro
   render(
     <Chat client={chatClient}>
       <Channel {...channelProps}>
-        <ComponentProvider value={components}>
+        <WithComponents overrides={components}>
           <MessageList {...msgListProps} />
-        </ComponentProvider>
+        </WithComponents>
       </Channel>
     </Chat>,
   );

src/context/ComponentContext.tsx

@@ -241,9 +241,9 @@ export type ComponentContextValue = {
   /** Custom UI component to display a message in the `VirtualizedMessageList`, does not have a default implementation */
   VirtualMessage?: React.ComponentType<FixedHeightMessageProps>;
   /** Custom UI component to wrap MessageList children. Default is the `ul` tag */
-  MessageListWrapper?: React.ComponentType;
+  MessageListWrapper?: React.ComponentType<PropsWithChildren>;
   /** Custom UI component to wrap each element of MessageList. Default is the `li` tag */
-  MessageListItem?: React.ComponentType;
+  MessageListItem?: React.ComponentType<PropsWithChildren>;
 };
 
 export const ComponentContext = React.createContext<ComponentContextValue>({});