Detect circular references when inspecting JSX elements

src/bun.js/ConsoleObject.zig

@@ -1136,7 +1136,7 @@ pub const Formatter = struct {
 
         pub fn canHaveCircularReferences(tag: Tag) bool {
             return switch (tag) {
-                .Function, .Array, .Object, .Map, .Set, .Error, .Class, .Event => true,
+                .Function, .Array, .Object, .Map, .Set, .Error, .Class, .Event, .JSX => true,
                 else => false,
             };
         }

src/bun.js/test/pretty_format.zig

@@ -326,7 +326,7 @@ pub const JestPrettyFormat = struct {
             }
 
             pub inline fn canHaveCircularReferences(tag: Tag) bool {
-                return tag == .Array or tag == .Object or tag == .Map or tag == .Set;
+                return tag == .Array or tag == .Object or tag == .Map or tag == .Set or tag == .JSX;
             }
 
             const Result = struct {

test/js/bun/util/inspect.test.js

@@ -316,6 +316,38 @@ it("jsx with fragment", () => {
   expect(input).toBe(output);
 });
 
+it("jsx with circular reference", () => {
+  const el = {
+    $$typeof: Symbol.for("react.element"),
+    type: "div",
+    key: null,
+    ref: null,
+    props: {},
+  };
+  el.key = el;
+  expect(Bun.inspect(el)).toBe("<div key=[Circular] />");
+
+  const el2 = {
+    $$typeof: Symbol.for("react.element"),
+    type: "span",
+    key: null,
+    ref: null,
+    props: {},
+  };
+  el2.props.foo = el2;
+  expect(Bun.inspect(el2)).toBe("<span foo=[Circular] />");
+
+  const el3 = {
+    $$typeof: Symbol.for("react.element"),
+    type: "p",
+    key: null,
+    ref: null,
+    props: {},
+  };
+  el3.props.children = el3;
+  expect(Bun.inspect(el3)).toBe("<p>\n  [Circular]\n</p>");
+});
+
 it("inspect", () => {
   expect(Bun.inspect(new TypeError("what")).includes("TypeError: what")).toBe(true);
   expect(Bun.inspect("hi")).toBe('"hi"');