fix: log JSDOM errors more cleanly (#12386)

Co-authored-by: Cody Ray Hoeft <[email protected]>

CHANGELOG.md

@@ -35,6 +35,7 @@
 - `[jest-config]` Pass `moduleTypes` to `ts-node` to enforce CJS when transpiling ([#12397](https://github.com/facebook/jest/pull/12397))
 - `[jest-config, jest-haste-map]` Allow searching for tests in `node_modules` by exposing `retainAllFiles` ([#11084](https://github.com/facebook/jest/pull/11084))
 - `[jest-environment-jsdom]` Make `jsdom` accessible to extending environments again ([#12232](https://github.com/facebook/jest/pull/12232))
+- `[jest-environment-jsdom]` Log JSDOM errors more cleanly ([#12386](https://github.com/facebook/jest/pull/12386))
 - `[@jest/expect-utils]` [**BREAKING**] Fix false positives when looking for `undefined` prop ([#8923](https://github.com/facebook/jest/pull/8923))
 - `[jest-haste-map]` Don't use partial results if file crawl errors ([#12420](https://github.com/facebook/jest/pull/12420))
 - `[jest-jasmine2, jest-types]` [**BREAKING**] Move all `jasmine` specific types from `@jest/types` to its own package ([#12125](https://github.com/facebook/jest/pull/12125))

e2e/console-jsdom/__tests__/console.test.js

@@ -37,4 +37,11 @@ test('can mock console.error calls from jsdom', () => {
   window.removeEventListener('error', onError);
 
   expect(console.error).toHaveBeenCalledTimes(1);
+  expect(console.error).toHaveBeenCalledWith(
+    expect.objectContaining({
+      detail: expect.objectContaining({
+        message: 'this is an error in an event callback',
+      }),
+    }),
+  );
 });

packages/jest-environment-jsdom/src/index.ts

@@ -36,6 +36,13 @@ export default class JSDOMEnvironment implements JestEnvironment<number> {
 
   constructor(config: JestEnvironmentConfig, context: EnvironmentContext) {
     const {projectConfig} = config;
+
+    const virtualConsole = new VirtualConsole();
+    virtualConsole.sendTo(context.console, {omitJSDOMErrors: true});
+    virtualConsole.on('jsdomError', error => {
+      context.console.error(error);
+    });
+
     this.dom = new JSDOM(
       typeof projectConfig.testEnvironmentOptions.html === 'string'
         ? projectConfig.testEnvironmentOptions.html
@@ -50,7 +57,7 @@ export default class JSDOMEnvironment implements JestEnvironment<number> {
             : undefined,
         runScripts: 'dangerously',
         url: 'http://localhost/',
-        virtualConsole: new VirtualConsole().sendTo(context.console),
+        virtualConsole,
         ...projectConfig.testEnvironmentOptions,
       },
     );