使用 react-testing-library 测试错误状态时，如何抑制预期的 Axios 错误消息？

如何解决使用 react-testing-library 测试错误状态时，如何抑制预期的 Axios 错误消息？

我正在修改我的一些 React 代码，以使用 @testing-library/react、react-query 和 msw 来模拟我使用 axios 进行的网络调用。>

到目前为止（经过一些脑筋急转弯）我已经可以使用此代码了！ （耶！）

有问题的测试（简化）：

import React from 'react';
import { rest } from 'msw';
import { setupServer } from 'msw/node';
import { screen,waitFor,waitForElementToBeRemoved } from '@testing-library/react';
import { queryCache } from 'react-query';
import userEvent from '@testing-library/user-event';
import Login from '../Login';
import { render,queryClient } from '~/testhelpers/helpers.integration';
// #endregion imports

const server = setupServer(
    // ...default setup for successful request; not relevant here
);
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterall(() => server.close());

describe('rendering',() => {
    describe('error',() => {
        it.only('should render error message when request fails',async () => {
            server.use(
                rest.post(`${API_BASE_URL}api/auth/token`,(req,res,ctx) => {
                    return res(ctx.status(400),ctx.json('Invalid username or password.'));
                })
            );
            render(<Login />);
            const usernameInput = screen.getByLabelText('Username');
            const passwordInput = screen.getByLabelText('Password');
            const submitInput = screen.getByRole('button',{ name: 'Login' });
            userEvent.type(usernameInput,'testUsername');
            userEvent.type(passwordInput,'testPassword');
            userEvent.click(submitInput);
            await waitFor(() => {
                expect(screen.getByText('Invalid username or password.')).toBeInTheDocument();
            });
        });
    });
});

同样，这个测试有效！万岁！但问题是我让 axios 认为（通过 msw）它正在接收针对此查询的 400 响应，并且当我运行此测试时，我在控制台中收到了大量错误消息开玩笑：

 PASS  src/display/views/login/__tests__/Login.spec.js
  rendering
    error
      √ should hide loading indicator and render error message when request fails (522 ms)

  console.error
    Error: Request Failed with status code 400
        at createError (C:\Users\me\Documents\_Programming\GitHub\my-project\node_modules\axios\lib\core\createError.js:16:15)
        at settle (C:\Users\me\Documents\_Programming\GitHub\my-project\node_modules\axios\lib\core\settle.js:18:12)
        at XMLHttpRequestOverride.handleLoad [as onreadystatechange] (C:\Users\me\Documents\_Programming\GitHub\my-project\node_modules\axios\lib\adapters\xhr.js:59:7)
        at XMLHttpRequestOverride.triggerReadyStateChange (C:\Users\me\Documents\_Programming\GitHub\my-project\node_modules\node-request-interceptor\src\interceptors\XMLHttpRequest\XMLHttpRequestOverride.ts:133:33)     
        at XMLHttpRequestOverride.trigger (C:\Users\me\Documents\_Programming\GitHub\my-project\node_modules\node-request-interceptor\src\interceptors\XMLHttpRequest\XMLHttpRequestOverride.ts:145:12)
        at C:\Users\me\Documents\_Programming\GitHub\my-project\node_modules\node-request-interceptor\src\interceptors\XMLHttpRequest\XMLHttpRequestOverride.ts:306:18
        at runNextTicks (internal/process/task_queues.js:62:5)
        at processtimers (internal/timers.js:489:9) {
      config: {
        adapter: [Function: xhrAdapter],transformRequest: { '0': [Function: transformRequest] },transformResponse: { '0': [Function: transformResponse] },timeout: 0,xsrfCookieName: 'XSRF-TOKEN',xsrfheaderName: 'X-XSRF-TOKEN',maxContentLength: -1,validateStatus: [Function: validateStatus],headers: {
          Accept: 'application/json,text/plain,*/*','Content-Type': 'application/json;charset=utf-8'
        },method: 'post',url: 'http://baseurl/api/auth/token',data: '{"username":"testUsername","password":"testPassword"}'
      },request: XMLHttpRequestOverride {
        requestHeaders: {
          Accept: 'application/json,responseHeaders: { 'x-powered-by': 'msw','content-type': 'application/json' },_events: [],UNSENT: 0,OPENED: 1,HEADERS_RECEIVED: 2,LOADING: 3,DONE: 4,onreadystatechange: [Function: handleLoad],onabort: null,onerror: [Function: handleError],onload: null,onloadend: null,onloadstart: null,onprogress: null,ontimeout: [Function: handleTimeout],method: 'POST',readyState: 4,withCredentials: false,status: 400,statusText: 'Bad Request',"password":"testPassword"}',response: '"Invalid username or password."',responseType: 'text',responseText: '"Invalid username or password."',responseXML: null,responseURL: '',upload: null,async: true,user: undefined,password: undefined
      },response: {
        data: 'Invalid username or password.',headers: { 'x-powered-by': 'msw',config: {
          adapter: [Function: xhrAdapter],transformRequest: [Object],transformResponse: [Object],headers: [Object],"password":"testPassword"}'
        },request: XMLHttpRequestOverride {
          requestHeaders: [Object],responseHeaders: [Object],password: undefined
        }
      }
    }

      at CustomConsole.console.error (node_modules/@testing-library/react/dist/act-compat.js:52:34)
      at node_modules/react-query/lib/core/mutation.js:115:32

我认为，在某种程度上，this is expected，但考虑到我期待并且实际上希望该请求失败，这在我的测试中确实是不必要的垃圾邮件。是否有最佳实践方法可以通过 Jest、RTL、msw 或 Axios 的配置删除此不必要的日志？

解决方法

默认情况下将反应查询日志记录到控制台，您可以使用 setLogger 覆盖它：

import { setLogger } from 'react-query'

setLogger({
  log: printLog,warn: printWarn,error: printError,})

另见：https://react-query.tanstack.com/reference/setLogger