diff --git a/CHANGELOG.md b/CHANGELOG.md
index e54f28c38b77..e2c3d6f74533 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@
- `[jest-changed-files]` Use `git diff` instead of `git log` for `--changedSince` ([#10155](https://github.com/facebook/jest/pull/10155))
- `[jest-console]` Add missing console.timeLog for compatability with Node ([#10209](https://github.com/facebook/jest/pull/10209))
- `[jest-snapshot]` Strip added indentation for inline error snapshots ([#10217](https://github.com/facebook/jest/pull/10217))
+- `[pretty-print]` Added support for serializing custom elements (web components) ([#10217](https://github.com/facebook/jest/pull/10237))
### Chore & Maintenance
diff --git a/packages/pretty-format/src/__tests__/DOMElement.test.ts b/packages/pretty-format/src/__tests__/DOMElement.test.ts
index b5e22f549c40..c913736c1779 100644
--- a/packages/pretty-format/src/__tests__/DOMElement.test.ts
+++ b/packages/pretty-format/src/__tests__/DOMElement.test.ts
@@ -344,6 +344,47 @@ Testing.`;
);
});
+ it('supports custom elements', () => {
+ const customElementCreated = jest.fn();
+ class CustomElement extends HTMLElement {
+ constructor() {
+ super();
+ customElementCreated();
+ }
+ }
+
+ class CustomParagraphElement extends HTMLParagraphElement {}
+
+ class CustomExtendedElement extends CustomElement {}
+
+ customElements.define('custom-element', CustomElement);
+ customElements.define('custom-extended-element', CustomExtendedElement);
+ customElements.define('custom-paragraph', CustomParagraphElement, {
+ extends: 'p',
+ });
+
+ const parent = document.createElement('div');
+ parent.innerHTML = [
+ '