Repository navigation
Test React component using React Query's useSuspenseQuery #164
Description
Activity
Hello!
It's hard to know what's going on here, but I suspect this is due to the details of Jest - by default Jest doesn't run in a real browser, but uses jsdom to emulate one, which can result in small weird differences in lots of places.
One thing that could trigger this is that you're not specifying any headers with your stream. That's totally valid and it should work, but it's a bit unusual in real usage in HTTP, and I can imagine that Jest's mocks might not handle it correctly.
What happens if you add
{ 'transfer-encoding': 'chunked' }as a final argument tothenStream?One other thing is that you normally want to call
stream.write(x)&stream.end(y), notstream.emit(...). A passthrough stream automatically emits everything you write to it, and manually firing those events isn't really how node streams are supposed to be used. See Mockttp's thenStream tests for an example.If that doesn't work, I'm not sure what's going on, and it'd be helpful if you could set up a standalone repro to demonstrate this.
Reacted by Anthony CaronThanks a lot for your answer ! I added the header you mentioned with no significant change, then when I used
stream.end()instead ofstream.emit('end')it gave me another error which is:Unexpected end of JSON input. I'm actually thinking it might be smarter for me to use msw-trpc to mock my tRPC server.Unexpected end of JSON input
Oh, that's a bit easier - in the code above at least, you're directly passing an object to the stream (
stream.emit('data', { ... })). This is HTTP, so the stream data should be a string or a buffer - the actual serialized data your server would return.If you wrap your data into
JSON.stringify({ pending: 0 })it will probably do what you expect.It doesn't :(
I've tried many forms including:
mockedStream.emit('data', JSON.stringify({ countPendingConversations: 0 }));
mockedStream.write(Buffer.from(JSON.stringify({ data: { countPendingConversations: 0 } })));
mockedStream.write(Buffer.from(JSON.stringify({ countPendingConversations: 0 })));
Yet, had no success and the same error getting thrown...Hmm, hard to say then. You may be able to add your own network logging somewhere to see exactly what's being sent and received, but that depends on your setup.
I'm happy to investigate further myself, but I think this will need a standalone repro to be able to do so.
I might do that if I find it's the solution I want to go for. Thanks for your support, I'll post again here if I need further help.
Hello !
I'm trying to test my React component that's querying through a tRPC client using React Query's function
useSuspenseQuery(for more info, click here).I'm using Jest and I'm mocking the tPRC server with Mockttp.
I suppose that when using
useSuspenseQuerywe should mock that query using a stream, so my test looks like this:I'm running my tests using
mockttp -c jestas recommended in Mockttp's documentation. That part looks fine.My problem is that when running this test I'm having the following error:
I'm not super familiar with streams but I'm wondering if I'm using the right function from
mockttpto mock theuseSuspenseQueryor if I'm not passing the right thing tothenStream(...).Any help is appreciated, thanks !