.

Author: mdjastrzebski

src/fire-event.ts

@@ -85,7 +85,7 @@ function getEventHandlerState(
     return { enabled: true };
   }
 
-  return { enabled: false, reason: 'not a touch responder' };
+  return { enabled: false, reason: 'not being a touch responder' };
 }
 
 function findEventHandler(
@@ -104,8 +104,8 @@ function findEventHandler(
     } else {
       logger.warn(
         `FireEvent: "${eventName}" event handler is disabled on ${formatElement(element, {
-          minimal: true,
-        })} (${handlerState.reason}).`,
+          compact: true,
+        })} due to ${handlerState.reason}.`,
       );
     }
   }
@@ -159,7 +159,7 @@ function fireEvent(element: ReactTestInstance, eventName: EventName, ...data: un
   if (!handler) {
     logger.warn(
       `FireEvent: no enabled event handler for "${eventName}" found on ${formatElement(element, {
-        minimal: true,
+        compact: true,
       })} or its ancestors.`,
     );
     return;

src/helpers/format-element.ts

@@ -31,26 +31,48 @@ export function formatElement(
   const { children, ...props } = element.props;
   const childrenToDisplay = typeof children === 'string' ? [children] : undefined;
 
-  return prettyFormat(
-    {
-      // This prop is needed persuade the prettyFormat that the element is
-      // a ReactTestRendererJSON instance, so it is formatted as JSX.
-      $$typeof: Symbol.for('react.test.json'),
-      type: `${element.type}`,
-      props: mapProps ? mapProps(props) : props,
-      children: childrenToDisplay,
-    },
-    // See: https://www.npmjs.com/package/pretty-format#usage-with-options
-    {
-      plugins: [plugins.ReactTestComponent, plugins.ReactElement],
-      printFunctionName: false,
-      printBasicPrototype: false,
-      highlight: highlight,
-      min: compact,
-    },
+  return (
+    (typeof element.type === 'string' ? '' : 'composite ') +
+    prettyFormat(
+      {
+        // This prop is needed persuade the prettyFormat that the element is
+        // a ReactTestRendererJSON instance, so it is formatted as JSX.
+        $$typeof: Symbol.for('react.test.json'),
+        type: formatElementName(element.type),
+        props: mapProps ? mapProps(props) : props,
+        children: childrenToDisplay,
+      },
+      // See: https://www.npmjs.com/package/pretty-format#usage-with-options
+      {
+        plugins: [plugins.ReactTestComponent, plugins.ReactElement],
+        printFunctionName: false,
+        printBasicPrototype: false,
+        highlight: highlight,
+        min: compact,
+      },
+    )
   );
 }
 
+function formatElementName(type: ReactTestInstance['type']) {
+  if (typeof type === 'function') {
+    return type.displayName ?? type.name;
+  }
+
+  if (typeof type === 'object') {
+    if ('type' in type) {
+      // @ts-expect-error: despite typing this can happen for React.memo.
+      return formatElementName(type.type);
+    }
+    if ('render' in type) {
+      // @ts-expect-error: despite typing this can happen for React.forwardRefs.
+      return formatElementName(type.render);
+    }
+  }
+
+  return `${type}`;
+}
+
 export function formatElementList(elements: ReactTestInstance[], options?: FormatElementOptions) {
   if (elements.length === 0) {
     return '(no elements)';