support displayName

src/__snapshots__/index.test.ts.snap

@@ -4,6 +4,8 @@ exports[`snapshot anonymous component 1`] = `<Component />`;
 
 exports[`snapshot class component 1`] = `<ClassComponent />`;
 
+exports[`snapshot class component with displayName 1`] = `<ClassComponentWithDisplayName(ok) />`;
+
 exports[`snapshot deep dive 1`] = `
 <DivWrapper>
   <div>

src/index.ts

@@ -5,10 +5,11 @@ interface Props {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   [propName: string]: any;
 }
+type ComponentType = string | React.ComponentType | ((...args: any[]) => any);
 interface ReactTestRendererJSON {
   children: null | ReactTestRendererJSON[];
   props: Props;
-  type: string | Function;
+  type: ComponentType;
 }
 interface ReactTestRendererTree extends ReactTestRendererJSON {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -27,9 +28,9 @@ export interface TestReactNode {
 function normalizeMixedArray<T>(src: T | T[]): T[] {
   return Array.isArray(src) ? src : [src];
 }
-function normalizeType(type: string | Function): string {
+function normalizeType(type: ComponentType): string {
   if (typeof type === "string") return type;
-  return type.name ? type.name : "Component";
+  return (type as React.ComponentType).displayName || type.name || "Component";
 }
 
 function treeToJSON<T>(tree: T | ReactTestRendererTree): T | TestReactNode;
@@ -46,13 +47,13 @@ function treeToJSON(
   const children: TestReactNode["children"] =
     tree.rendered === null
       ? null
-      : normalizeMixedArray(tree.rendered).map(r => treeToJSON(r));
+      : normalizeMixedArray(tree.rendered).map((r) => treeToJSON(r));
 
   return {
     $$typeof: reactTestSymbol,
     children,
     props,
-    type
+    type,
   };
 }
 

test/fixtures/snapshot.tsx

@@ -3,7 +3,7 @@ import { Component, FunctionComponent, ReactElement, ReactNode } from "react";
 
 const EmptyComponent: FunctionComponent = (): null => null;
 const DivWrapper: FunctionComponent = ({
-  children
+  children,
 }: {
   children?: ReactNode;
 }): ReactElement<HTMLElement> => <div>{children}</div>;
@@ -13,6 +13,12 @@ class ClassComponent extends Component {
     return null;
   }
 }
+class ClassComponentWithDisplayName extends Component {
+  public render(): ReactNode {
+    return null;
+  }
+  static displayName = "ClassComponentWithDisplayName(ok)";
+}
 
 export { EmptyComponent, DivWrapper };
 
@@ -24,51 +30,52 @@ export const testCases: [string, ReactElement | null][] = [
   ["string children", <p>hoge</p>],
   ["null component", <EmptyComponent />],
   ["class component", <ClassComponent />],
+  ["class component with displayName", <ClassComponentWithDisplayName />],
   [
     "anonymous component",
-    (AnonymousComponent => <AnonymousComponent />)(() => null)
+    ((AnonymousComponent) => <AnonymousComponent />)(() => null),
   ],
   [
     "raw children",
     <DivWrapper>
       <p />
-    </DivWrapper>
+    </DivWrapper>,
   ],
   [
     "single children",
     <p>
       <p />
-    </p>
+    </p>,
   ],
   [
     "multiple children",
     <p>
       <p className="a" key="a" />
       <p className="b" key="b" />
-    </p>
+    </p>,
   ],
   [
     "multiple children with keys",
     <p>
       <p key="a" />
       <p key="b" />
-    </p>
+    </p>,
   ],
   [
     "multiple children includes null",
     <div>
       <p className="a" />
       {null}
       <p className="b" />
-    </div>
+    </div>,
   ],
   [
     "multiple children includes string",
     <div>
       <div className="a" />
       hoge
       <div className="b" />
-    </div>
+    </div>,
   ],
   [
     "deep dive",
@@ -78,7 +85,7 @@ export const testCases: [string, ReactElement | null][] = [
           <p className="b">hoge</p>
         </DivWrapper>
       </p>
-    </DivWrapper>
-  ]
+    </DivWrapper>,
+  ],
 ];
 /* eslint-enable react/jsx-key */