GetStream / stream-chat-react

React Chat SDK ➜ Stream Chat 💬
https://getstream.io/chat/sdk/react/
Other
696 stars 270 forks source link

Expose mocks for testing #1968

Open lr-mjaouen opened 1 year ago

lr-mjaouen commented 1 year ago

Motivation I may have miss it? but would it be possible to expose mocks for testing? Or what are your recommendation for testing? How do you bypass following warnings or furnish the providers (so far I mock component & hooks from gs to just render anything & do nothing),

The useChannelStateContext hook was called outside of the ChannelStateContext provider. Make sure this hook is called within a child of the Channel component. The errored call is located in the Window component.
The useChannelStateContext hook was called outside of the ChannelStateContext provider. Make sure this hook is called within a child of the Channel component. The errored call is located in the Window component.

Thank you.

Proposed solution channel mock builder exposed, Client / Channel components mocks? (like Apollo client for instance https://www.apollographql.com/docs/react/development-testing/testing/)

MessageList/VirtualMessageList mocked component?

Acceptance Criteria

MartinCupela commented 1 year ago

Hello @lr-mjaouen , we do not expose mocks. Could you provide an example, where you find yourself in need of such mocks, please?

lr-mjaouen commented 1 year ago

Hello, Mainly for testing purposes. (I remember in previous versions mocking the channel previously) Also for testing custom components (CustomInput, CustomMessage, CustomTimeSeparator etc). Exposing for instance aMessage({overrides}), aChannel({overrides}) would be useful and I saw you already have it? And maybe helpers too, like a context/Channel component already provided etc. Now moment I mock it myself (I'm not able to mock it properly anymore & pass it to de Channel component for instance), I just hard mock the components/hooks directly to avoid issues in my tests (hook usage without context warning etc).

vi.mock('stream-chat-react', async () => {
    const streamChatActual = await vi.importActual<typeof import('stream-chat-react')>('stream-chat-react');
    return {
        ...streamChatActual,
        MessageList: vi.fn(() => <></>),
        VirtualizedMessageList: vi.fn(() => <></>),
        Window: vi.fn(() => <></>),
        MessageInput: vi.fn(() => <></>),
        Channel: vi.fn(({ children }) => <>{children}</>),
        useChannelActionContext: vi.fn(),
    };
});

Not optimal. Could be useful to have default mocks (Messages, Channels, Attachements etc).

MartinCupela commented 1 year ago

@lr-mjaouen for now we do not plan to support maintenance of mocks. The situation may change in the future with priorities shifting. We will keep this as a feature request.

charliedavison commented 1 year ago

I've run into this issue as well, it would really help us to be able to get access to these ready-made mocks rather than having to try and create them ourselves. The use case for us specifically is where we are wanting to test components that are overriding the defaults like a custom message input.