playmP
tRPC•2y ago•
1 reply
playm

Test React component using trpc client and `useSuspenseQuery`

Hello !

I'm trying to test my React component that's querying through a tRPC client and useSuspenseQuery.
I'm using Jest and I'm mocking the tPRC server with Mockttp.

I suppose that when using useSuspenseQuery we should mock that query using a stream, so my test looks like this:
describe('Navigation menu', () => {
  const mockServer = mockttp.getLocal({
    cors: {...},
  });

  ...

  it('should display the nav menu', async () => {
    const reqUrl = '/ConversationAPI.countPendingConversations';
    const mockedStream = new PassThrough();
    await mockServer.forGet(reqUrl).thenStream(200, mockedStream);

    render(
      <Suspense fallback={<div>Loading...</div>}>
        <Nav />,
      </Suspense>
    );

    mockedStream.emit('data', {
      pending: 0,
    });
    mockedStream.emit('end');

    await waitFor(() => {
      return expect(screen.getByTestId('badge')).toBe('0');
    });
  });


I'm running my tests using mockttp -c jest as recommended in Mockttp's documentation. That part looks fine.

My problem is that when running this test I'm having the following error:
console.error
  Error: Error: socket hang up
      at Object.dispatchError ([...]/node_modules/jsdom/lib/jsdom/living/xhr/xhr-utils.js:63:19)
      ...
      at processTicksAndRejections (node:internal/process/task_queues:82:21) {
    type: 'XMLHttpRequest'
  }


I'm not super familiar with streams but I'm wondering if I'm using the right function from mockttp to mock the useSuspenseQuery or if I'm not passing the right thing to thenStream(...).

Any help is appreciated, thanks !
Was this page helpful?