Do not reset global.document before CustomElement:disconnectedCallbac…

…k has finished running, document should be accessible in this callback function

CHANGELOG.md

@@ -4,6 +4,8 @@
 
 ### Fixes
 
+- `[jest-environment-jsdom]` Do not reset the global.document too early on teardown ([#11871](https://github.com/facebook/jest/pull/11871))
+
 ### Chore & Maintenance
 
 ### Performance

packages/jest-environment-jsdom/src/__tests__/jsdom_environment.test.ts

@@ -39,4 +39,28 @@ describe('JSDomEnvironment', () => {
 
     expect(env.dom.window.navigator.userAgent).toEqual('foo');
   });
+
+  /**
+   * When used in conjunction with Custom Elements (part of the WebComponents standard)
+   * setting the global.document to null too early is problematic because:
+   *
+   * CustomElement's disconnectedCallback method is called when a custom element
+   * is removed from the DOM. The disconnectedCallback could need the document
+   * in order to remove some listener for example.
+   *
+   * global.close calls jsdom's Window.js.close which does this._document.body.innerHTML = "".
+   * The custom element will be removed from the DOM at this point, therefore disconnectedCallback
+   * will be called, so please make sure the global.document is still available at this point.
+   */
+  it('should not set the global.document to null too early', () => {
+    const env = new JSDomEnvironment(makeProjectConfig());
+
+    const originalCloseFn = env.global.close.bind(env.global);
+    env.global.close = () => {
+      originalCloseFn();
+      expect(env.global.document).not.toBeNull();
+    };
+
+    return env.teardown();
+  });
 });

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

@@ -125,9 +125,14 @@ class JSDOMEnvironment implements JestEnvironment<number> {
       if (this.errorEventListener) {
         this.global.removeEventListener('error', this.errorEventListener);
       }
+      this.global.close();
+
       // Dispose "document" to prevent "load" event from triggering.
+
+      // Note that this.global.close() will trigger the CustomElement::disconnectedCallback
+      // Do not reset the document before CustomElement disconnectedCallback function has finished running,
+      // document should be accessible within disconnectedCallback.
       Object.defineProperty(this.global, 'document', {value: null});
-      this.global.close();
     }
     this.errorEventListener = null;
     // @ts-expect-error