What's the correct way to suppress console errors in tests that are expecting them?

[kgetz-arista]

Over the years, we've employed a variety of approaches to suppress console errors in tests where the error is expected to appear. We've tried assigning directly to console.error, we've tried using mockImplementation, etc. However, starting with Vitest 4.0.7, none of these approaches seem to work anymore. No matter what we try, console errors (from deeply nested React components, for example) are bubbling up and being printed to the screen during testing, which results in a build failure for us.

What's the correct, Vitest-approved way of suppressing console errors during testing?

[sheremet-va]

https://vitest.dev/config/onconsolelog.html

[kgetz-arista]

Also, this doesn't even work. I tried setting this value to a function that always returns false, and I'm still seeing all the console errors.

[sheremet-va]

If you can't suppress logs, it means logs are not printed by a console, but piped directly into process.stdout. I would recommend trying to figure out what, when and how prints the log.

[kgetz-arista]

It seems to be coming from jsdom:

Error: Uncaught [Error: This is an intentional error thrown]
    at reportException (...\node_modules\.pnpm\[email protected]\node_modules\jsdom\lib\jsdom\living\helpers\runtime-script-errors.js:66:24)
    at innerInvokeEventListeners (...\node_modules\.pnpm\[email protected]\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:353:9)
    at invokeEventListeners (...\node_modules\.pnpm\[email protected]\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:286:3)
    at HTMLUnknownElementImpl._dispatch (...\node_modules\.pnpm\[email protected]\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:233:9)
    at HTMLUnknownElementImpl.dispatchEvent (...\node_modules\.pnpm\[email protected]\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:104:17)
    at HTMLUnknownElement.dispatchEvent (...\node_modules\.pnpm\[email protected]\node_modules\jsdom\lib\jsdom\living\generated\EventTarget.js:241:34)
    at Object.invokeGuardedCallbackDev (...\node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom.development.js:4213:16)
    at invokeGuardedCallback (...\node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom.development.js:4277:31)
    at beginWork$1 (...\node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom.development.js:27451:7)
    at performUnitOfWork (...\node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom.development.js:26560:12) Error: This is an intentional error thrown
    at ErrorComponent (C:/Users/kgetz/Work/event-viewer/lib/module-provisioning/src/sections/Studio/StudioLayout/__test__/StudioLayoutErrorBoundary.spec.tsx:9:9)
    at renderWithHooks (...\node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom.development.js:16305:18)
    at mountIndeterminateComponent (...\node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom.development.js:20074:13)
    at beginWork (...\node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom.development.js:21587:16)
    at HTMLUnknownElement.callCallback (...\node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom.development.js:4164:14)
    at HTMLUnknownElement.callTheUserObjectsOperation (...\node_modules\.pnpm\[email protected]\node_modules\jsdom\lib\jsdom\living\generated\EventListener.js:26:30)
    at innerInvokeEventListeners (...\node_modules\.pnpm\[email protected]\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:350:25)
    at invokeEventListeners (...\node_modules\.pnpm\[email protected]\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:286:3)
    at HTMLUnknownElementImpl._dispatch (...\node_modules\.pnpm\[email protected]\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:233:9)
    at HTMLUnknownElementImpl.dispatchEvent (...\node_modules\.pnpm\[email protected]\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:104:17)

[kgetz-arista]

☝️ We're using Vitest + jsdom + testing-library to test React components. We have a deeply nested React component that is throwing an error.

[kgetz-arista]

Looking at the first file mentioned in the trace, here's what jsdom is doing under the hood:

  if (!handled) {
    const errorString = shouldBeDisplayedAsError(error) ? `[${error.name}: ${error.message}]` : util.inspect(error);
    const jsdomError = new Error(`Uncaught ${errorString}`);
    jsdomError.detail = error;
    jsdomError.type = "unhandled exception";

    window._virtualConsole.emit("jsdomError", jsdomError);
  }