vitest + msw / testing reactQuery (axios) hooks using renderHook / unable to avoid error logging from test suite - react-query

Question

Using a custom logger as follow for our test suite :
export const queryClient = new QueryClient({
logger: {
log: console.log,
warn: console.warn,
error: () => {}
}
});
Mocking errors as follow within msw :
rest.get('/some/api/route', (_req, res, ctx) => {
return res.once(ctx.status(500), ctx.json({ errorMessage: 'some error' }));
})
We override the handlers for errors :
it("should return error", () => {
server.use(...errorHandlers);
const { result } = renderHook(() =>
query({
url: '/some/api/routes',
options: { retry: false }
})
);
...some assertions
});
Out tests are ok, but the network errors are still appearing in the console when running the test suite (the display is thrashed) :
Error: Request failed with status code 500
at createError (.../node_modules/axios/lib/core/createError.js:16:15)
at settle (.../node_modules/axios/lib/core/settle.js:17:12)
at XMLHttpRequestOverride.onloadend (.../node_modules/axios/lib/ad
... super long logging ...
Such non blocking issue is tackled in other projects using jest as the custom queryClient logger does the job; it seems that it behaves differently using vitest. Does anyone knows which part is the culprit in that context ? What should be done ?

Answer 1

passing a custom logger to the QueryClient is a feature that was introduced in v4.
For v3, you need to call setLogger, which is exported from react-query:
https://react-query-v3.tanstack.com/reference/setLogger
import { setLogger } from 'react-query'
setLogger({
log: console.log,
warn: console.warn,
error: () => {}
})