react-component-snapshot 0.0.1 → 0.0.3

package/index.d.mts

@@ -12,61 +12,54 @@ declare global {
       | FiberNodeForInstrinsicElement
       | FiberNodeForTextNode
 
-    export interface FiberRootNode {
-      child: FiberNode
+    interface FiberType {
+      child: FiberNode | null
       sibling: FiberNode | null
 
+      tag: number
+      return?: FiberRootNode | FiberNode
+    }
+
+    export interface FiberRootNode extends FiberType {
+      child: FiberNode
+
       elementType: React.FunctionComponent
       type: React.FunctionComponent
 
       stateNode: {
         current: FiberRootNode
       }
-      return?: FiberRootNode // | null
+      return?: FiberRootNode
     }
 
-    export interface FiberNodeForFunctionComponent {
-      child: FiberNode | null
-      sibling: FiberNode | null
-
+    export interface FiberNodeForFunctionComponent extends FiberType {
       elementType: React.FunctionComponent
       type: React.FunctionComponent
 
       stateNode: null
-      return?: FiberNode // | null
     }
 
-    export interface FiberNodeForClassComponent {
-      child: FiberNode | null
-      sibling: FiberNode | null
-
+    export interface FiberNodeForClassComponent extends FiberType {
       elementType: React.ComponentClass
       type: React.ComponentClass
 
       stateNode: React.Component
-      return?: FiberNode // | null
     }
 
-    export interface FiberNodeForInstrinsicElement {
-      child: FiberNode | null
-      sibling: FiberNode | null
-
+    export interface FiberNodeForInstrinsicElement extends FiberType {
       elementType: keyof React.JSX.IntrinsicElements
       type: keyof React.JSX.IntrinsicElements
 
       stateNode: HTMLElement
-      return?: FiberNode
     }
 
-    export interface FiberNodeForTextNode {
+    export interface FiberNodeForTextNode extends FiberType {
       child: null
-      sibling: FiberNode | null
 
       elementType: null
       type: null
 
       stateNode: Text
-      return?: FiberNode
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-component-snapshot",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Transform a React component to match its snapshot in Jest",
   "keywords": [
     "react",

package/src/index.mjs

@@ -24,6 +24,14 @@ export function isReactPropsKey (key) {
   return String(key).startsWith('__reactProps$')
 }
 
+/**
+ *  @param {unknown} v
+ *  @returns {v is object}
+ */
+function isObject (v) {
+  return (v || false) instanceof Object && !Array.isArray(v)
+}
+
 /**
  *  @param {Element | Text | React.Component<any, any, any>} stateNode
  *  @returns {string | undefined}
@@ -47,8 +55,8 @@ export function getReactPropsKey (stateNode) {
 }
 
 /**
- * @param {Element | Text | React.Component<any, any, any>} stateNode
- * @returns {Record<PropertyKey, unknown> | null}
+ *  @param {Element | Text | React.Component<any, any, any>} stateNode
+ *  @returns {Record<PropertyKey, unknown> | null}
  */
 export function getStateNodeFiber (stateNode) {
   const key = getReactFiberKey(stateNode)
@@ -65,8 +73,8 @@ export function getStateNodeFiber (stateNode) {
 }
 
 /**
- * @param {React.Component<any, any, any> | Element | Text} stateNode
- * @returns {Record<PropertyKey, unknown> | null}
+ *  @param {React.Component<any, any, any> | Element | Text} stateNode
+ *  @returns {Record<PropertyKey, unknown> | null}
  */
 export function getStateNodeProps (stateNode) {
   const key = getReactPropsKey(stateNode)
@@ -82,6 +90,18 @@ export function getStateNodeProps (stateNode) {
   return null
 }
 
+/**
+ *  @param {{ container: { firstElementChild: Element | null } }} component
+ *  @returns {Element | null}
+ */
+export function getComponentElement ({
+  container: {
+    firstElementChild: element
+  }
+}) {
+  return element
+}
+
 /**
  *  @param {Element} element
  *  @returns {FiberNode | null}
@@ -133,8 +153,8 @@ function getProps (fiberNode) {
       Object.fromEntries(
         Object.entries(props)
           .filter(([key]) => key !== 'children')
-          .filter(([key, value]) => { // @ts-expect-error
-            if ((value || false) instanceof Object && !Array.isArray(value)) return !('current' in value)
+          .filter(([key, value]) => {
+            if (isObject(value)) return !('current' in value)
             return true
           })
       )
@@ -148,7 +168,7 @@ function getProps (fiberNode) {
  *  @param {FiberNode} fiberNode
  *  @returns {Array<string | FiberNode>}
  */
-function getChildren (fiberNode) {
+function getChildrenOf (fiberNode) {
   const child = fiberNode.child
 
   if (child) {
@@ -195,6 +215,17 @@ function toChildren (child) {
   )
 }
 
+/**
+ *  @param {FiberNode} fiberNode
+ *  @returns {Array<string | Record<PropertyKey, unknown>>}
+ */
+function getChildren (fiberNode) {
+  return (
+    getChildrenOf(fiberNode)
+      .map(toChildren)
+  )
+}
+
 /**
  *  @param {FiberNode} fiberNode
  *  @returns {Record<PropertyKey, unknown>}
@@ -202,10 +233,7 @@ function toChildren (child) {
 function transform (fiberNode) {
   const type = getType(fiberNode)
   const props = getProps(fiberNode)
-  const children = (
-    getChildren(fiberNode)
-      .map(toChildren)
-  )
+  const children = getChildren(fiberNode)
 
   return (
     Object.defineProperty({
@@ -220,8 +248,8 @@ function transform (fiberNode) {
 }
 
 /**
- * @param {Element | null | undefined} element
- * @returns {Record<PropertyKey, unknown> | null}
+ *  @param {Element | null | undefined} element
+ *  @returns {Record<PropertyKey, unknown> | null}
  */
 export default function snapshotOf (element) {
   if (element instanceof HTMLElement) {

package/src/react/ReactSymbols.mjs

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export const REACT_LEGACY_ELEMENT_TYPE = Symbol.for('react.element')
+export const REACT_ELEMENT_TYPE = Symbol.for('react.transitional.element')
+export const REACT_PORTAL_TYPE = Symbol.for('react.portal')
+export const REACT_FRAGMENT_TYPE = Symbol.for('react.fragment')
+export const REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode')
+export const REACT_PROFILER_TYPE = Symbol.for('react.profiler')
+export const REACT_PROVIDER_TYPE = Symbol.for('react.provider')
+export const REACT_CONSUMER_TYPE = Symbol.for('react.consumer')
+export const REACT_CONTEXT_TYPE = Symbol.for('react.context')
+export const REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref')
+export const REACT_SUSPENSE_TYPE = Symbol.for('react.suspense')
+export const REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list')
+export const REACT_MEMO_TYPE = Symbol.for('react.memo')
+export const REACT_LAZY_TYPE = Symbol.for('react.lazy')
+export const REACT_SCOPE_TYPE = Symbol.for('react.scope')
+export const REACT_ACTIVITY_TYPE = Symbol.for('react.activity')
+export const REACT_LEGACY_HIDDEN_TYPE = Symbol.for('react.legacy_hidden')
+export const REACT_TRACING_MARKER_TYPE = Symbol.for('react.tracing_marker')
+export const REACT_MEMO_CACHE_SENTINEL = Symbol.for('react.memo_cache_sentinel')
+export const REACT_POSTPONE_TYPE = Symbol.for('react.postpone')
+export const REACT_VIEW_TRANSITION_TYPE = Symbol.for('react.view_transition')

package/src/react/getComponentNameFromType.mjs

@@ -0,0 +1,145 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  REACT_CONTEXT_TYPE,
+  REACT_CONSUMER_TYPE,
+  REACT_FORWARD_REF_TYPE,
+  REACT_FRAGMENT_TYPE,
+  REACT_PORTAL_TYPE,
+  REACT_MEMO_TYPE,
+  REACT_PROFILER_TYPE,
+  REACT_PROVIDER_TYPE,
+  REACT_STRICT_MODE_TYPE,
+  REACT_SUSPENSE_TYPE,
+  REACT_SUSPENSE_LIST_TYPE,
+  REACT_LAZY_TYPE,
+  REACT_TRACING_MARKER_TYPE,
+  REACT_VIEW_TRANSITION_TYPE,
+  REACT_ACTIVITY_TYPE
+} from './ReactSymbols.mjs'
+
+/**
+ * @param {{displayName?: string | null}} outerType
+ * @param {{displayName?: string | null, name?: string | null}} innerType
+ * @param {string} wrapperName
+ * @returns
+ */
+function getWrappedName (
+  outerType,
+  innerType,
+  wrapperName
+) {
+  const outerDisplayName = outerType.displayName
+
+  if (outerDisplayName) {
+    return outerDisplayName
+  }
+
+  const innerDisplayName = innerType.displayName || innerType.name || null
+
+  if (innerDisplayName) {
+    return `${wrapperName}(${innerDisplayName})`
+  }
+
+  return wrapperName
+}
+
+/**
+ * @param {{displayName?: string | null}} type
+ * @returns {string}
+ */
+function getContextName (type) {
+  return type.displayName || 'Context'
+}
+
+const REACT_CLIENT_REFERENCE = Symbol.for('react.client.reference')
+
+/**
+ * @param {unknown} type
+ * @returns {string | null}
+ */
+export default function getComponentNameFromType (type) {
+  if (type == null) return null
+
+  if (typeof type === 'function') { // @ts-expect-error
+    if (type.$$typeof === REACT_CLIENT_REFERENCE) return null
+    return ( // @ts-expect-error
+      type.displayName || type.name || null
+    )
+  }
+
+  if (typeof type === 'string') return type
+
+  switch (type) {
+    case REACT_FRAGMENT_TYPE:
+      return 'Fragment'
+    case REACT_PROFILER_TYPE:
+      return 'Profiler'
+    case REACT_STRICT_MODE_TYPE:
+      return 'StrictMode'
+    case REACT_SUSPENSE_TYPE:
+      return 'Suspense'
+    case REACT_SUSPENSE_LIST_TYPE:
+      return 'SuspenseList'
+    case REACT_ACTIVITY_TYPE:
+      return 'Activity'
+    case REACT_VIEW_TRANSITION_TYPE:
+      return 'ViewTransition'
+    case REACT_TRACING_MARKER_TYPE:
+      return 'TracingMarker'
+  }
+
+  if (typeof type === 'object') { // @ts-expect-error
+    switch (type.$$typeof) {
+      case REACT_PORTAL_TYPE:
+        return 'Portal'
+
+      case REACT_PROVIDER_TYPE: // @ts-expect-error
+        return getContextName(type._context) + '.Provider'
+
+      case REACT_CONTEXT_TYPE:
+        return getContextName(type) + '.Context'
+
+      case REACT_CONSUMER_TYPE: // @ts-expect-error
+        return getContextName(type._context) + '.Consumer'
+
+      case REACT_FORWARD_REF_TYPE: // @ts-expect-error
+        return getWrappedName(type, type.render, 'ForwardRef')
+
+      case REACT_MEMO_TYPE:
+      {
+        // @ts-expect-error
+        const outerName = type.displayName || null
+
+        if (outerName !== null) {
+          return outerName
+        }
+
+        // @ts-expect-error
+        return getComponentNameFromType(type.type) || 'Memo'
+      }
+
+      case REACT_LAZY_TYPE:
+      {
+        // @ts-expect-error
+        const payload = type._payload
+
+        // @ts-expect-error
+        const init = type._init
+
+        try {
+          return getComponentNameFromType(init(payload))
+        } catch {
+          return null
+        }
+      }
+    }
+  }
+
+  return null
+}

package/src/react.mjs

@@ -1,16 +1,17 @@
 // @ts-nocheck
 
+/**
+ *  @typedef {ReactComponentSnapshotTypes.FiberNode} FiberNode
+ */
+
 import debug from 'debug'
 
 const log = debug('react-component-snapshot')
 
-// export const REACT_LEGACY_ELEMENT_TYPE = Symbol.for('react.element')
-// export const REACT_ELEMENT_TYPE = Symbol.for('react.transitional.element')
 export const REACT_PORTAL_TYPE = Symbol.for('react.portal')
 export const REACT_FRAGMENT_TYPE = Symbol.for('react.fragment')
 export const REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode')
 export const REACT_PROFILER_TYPE = Symbol.for('react.profiler')
-// export const REACT_PROVIDER_TYPE = Symbol.for('react.provider')
 export const REACT_CONSUMER_TYPE = Symbol.for('react.consumer')
 export const REACT_CONTEXT_TYPE = Symbol.for('react.context')
 export const REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref')
@@ -18,15 +19,30 @@ export const REACT_SUSPENSE_TYPE = Symbol.for('react.suspense')
 export const REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list')
 export const REACT_MEMO_TYPE = Symbol.for('react.memo')
 export const REACT_LAZY_TYPE = Symbol.for('react.lazy')
-// Symbol.for('react.scope')
-// Symbol.for('react.debug_trace_mode')
-export const REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen')
-// Symbol.for('react.legacy_hidden')
-// Symbol.for('react.tracing_marker')
-// export const REACT_MEMO_CACHE_SENTINEL = Symbol.for('react.memo_cache_sentinel')
-// export const MAYBE_ITERATOR_SYMBOL = Symbol.iterator
 export const REACT_CLIENT_REFERENCE = Symbol.for('react.client.reference')
 
+/**
+ * @param {{displayName?: string | null}} outerType
+ * @param {{displayName?: string | null, name?: string | null}} innerType
+ * @param {string} refKey
+ * @returns {string | null}
+ */
+function getNameFromRef (outerType, innerType, refKey) {
+  const outerName = outerType.displayName || null
+
+  if (outerName) return outerName
+
+  const innerName = innerType.displayName || innerType.name || null
+
+  if (innerName) return `${refKey}(${innerName})`
+
+  return refKey
+}
+
+/**
+ * @param {FiberNode['type']} type
+ * @returns {string | null}
+ */
 export function getNameFromType (type) {
   if (type == null) return null
 
@@ -62,39 +78,22 @@ export function getNameFromType (type) {
       case REACT_CONSUMER_TYPE:
         return (type._context.displayName || 'Context') + '.Consumer'
       case REACT_FORWARD_REF_TYPE:
-      {
-        const innerType = type.render
-        type = type.displayName
-
-        if (type) return type
+        return getNameFromRef(type, type.render, 'ForwardRef')
 
-        type = innerType.displayName || innerType.name || ''
-
-        return (
-          type !== ''
-            ? `ForwardRef(${type})`
-            : 'ForwardRef'
-        )
-      }
       case REACT_MEMO_TYPE:
-      {
-        const innerType = type.displayName || null
-
         return (
-          innerType !== null
-            ? innerType
-            : getNameFromType(type.type) || 'Memo'
+          type.displayName || getNameFromType(type.type) || 'Memo'
         )
-      }
+
       case REACT_LAZY_TYPE:
       {
-        const innerType = type._payload
-        type = type._init
+        const payload = type._payload
+        const init = type._init
 
         try {
-          return getNameFromType(type(innerType))
-        } catch (message) {
-          log(`Lazy error. Message was "${message}"`)
+          return getNameFromType(init(payload))
+        } catch ({ message }) {
+          log(`Lazy Component error. Message was "${message}"`)
         }
       }
     }
@@ -103,6 +102,10 @@ export function getNameFromType (type) {
   return null
 }
 
+/**
+ * @param {FiberNode} fiberNode
+ * @returns {string | null}
+ */
 export function getType (fiberNode) {
   const type = fiberNode.type
 
@@ -116,14 +119,7 @@ export function getType (fiberNode) {
     case 18:
       return 'DehydratedFragment'
     case 11:
-    {
-      return (
-        (fiberNode = type.render),
-        (fiberNode = fiberNode.displayName || fiberNode.name || ''),
-        type.displayName ||
-            (fiberNode !== '' ? `ForwardRef(${fiberNode})` : 'ForwardRef')
-      )
-    }
+      return getNameFromRef(type, type.render, 'ForwardRef')
     case 7:
       return 'Fragment'
     case 26:
@@ -162,16 +158,16 @@ export function getType (fiberNode) {
     case 15:
       if (typeof type === 'function') return type.displayName || type.name || null
       if (typeof type === 'string') return type
-      break
+      return null
     case 29:
     {
-      const type = fiberNode._debugInfo || null
+      const info = fiberNode._debugInfo || null
 
-      if (type != null) {
-        let i = type.length - 1
+      if (info != null) {
+        let i = info.length - 1
 
         for (i; i >= 0; i--) {
-          const t = type[i]
+          const t = info[i]
           const n = t.name
 
           if (typeof n === 'string') return n
@@ -181,5 +177,6 @@ export function getType (fiberNode) {
       if (fiberNode.return !== null) return getType(fiberNode.return)
     }
   }
+
   return null
 }