react-component-snapshot 0.0.2 → 0.0.4

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.2",
+  "version": "0.0.4",
   "description": "Transform a React component to match its snapshot in Jest",
   "keywords": [
     "react",
@@ -26,10 +26,12 @@
   "scripts": {
     "lint": "eslint",
     "lint:fix": "npm run lint -- --fix",
+    "prepare": "husky",
     "test": "NODE_ENV=test jest"
   },
   "dependencies": {
-    "debug": "^4.4.0"
+    "debug": "^4.4.0",
+    "react-component-name": "^0.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.26.10",
@@ -42,13 +44,13 @@
     "@testing-library/react": "^16.2.0",
     "@types/debug": "^4.1.12",
     "@types/jest": "^29.5.14",
-    "@types/prop-types": "^15.7.14",
     "@types/react": "^19.0.11",
     "@typescript-eslint/parser": "^8.26.1",
     "core-js": "^3.41.0",
     "eslint": "^9.22.0",
     "eslint-plugin-react": "^7.37.4",
     "globals": "^16.0.0",
+    "husky": "^9.1.7",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "react": "19.0.0"

package/src/index.mjs

@@ -3,10 +3,20 @@
  */
 
 import {
-  getType
-} from './react.mjs'
+  getComponentNameFromFiber as getType
+} from 'react-component-name'
 
-const REACT_COMPONENT_SNAPSHOT = Symbol.for('react.test.json')
+import {
+  REACT_COMPONENT_SNAPSHOT
+} from './symbols.mjs'
+
+/**
+ *  @param {unknown} v
+ *  @returns {v is object}
+ */
+function isObject (v) {
+  return (v || false) instanceof Object && !Array.isArray(v)
+}
 
 /**
  *  @param {PropertyKey} key
@@ -145,8 +155,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
           })
       )
@@ -160,7 +170,7 @@ function getProps (fiberNode) {
  *  @param {FiberNode} fiberNode
  *  @returns {Array<string | FiberNode>}
  */
-function getChildren (fiberNode) {
+function getChildrenOf (fiberNode) {
   const child = fiberNode.child
 
   if (child) {
@@ -207,6 +217,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>}
@@ -214,10 +235,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({

package/src/symbols.mjs

@@ -0,0 +1 @@
+export const REACT_COMPONENT_SNAPSHOT = Symbol.for('react.test.json')

package/src/react.mjs

@@ -1,185 +0,0 @@
-// @ts-nocheck
-
-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')
-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')
-
-export function getNameFromType (type) {
-  if (type == null) return null
-
-  if (typeof type === 'function') {
-    return (
-      type.$$typeof === REACT_CLIENT_REFERENCE
-        ? null
-        : type.displayName || type.name || null
-    )
-  }
-
-  if (typeof type === 'string') return type
-
-  switch (type) {
-    case REACT_FRAGMENT_TYPE:
-      return 'Fragment'
-    case REACT_PORTAL_TYPE:
-      return 'Portal'
-    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'
-  }
-
-  if (typeof type === 'object') {
-    switch (type.$$typeof) {
-      case REACT_CONTEXT_TYPE:
-        return (type.displayName || 'Context') + '.Provider'
-      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
-
-        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'
-        )
-      }
-      case REACT_LAZY_TYPE:
-      {
-        const innerType = type._payload
-        type = type._init
-
-        try {
-          return getNameFromType(type(innerType))
-        } catch (message) {
-          log(`Lazy error. Message was "${message}"`)
-        }
-      }
-    }
-  }
-
-  return null
-}
-
-export function getType (fiberNode) {
-  const type = fiberNode.type
-
-  switch (fiberNode.tag) {
-    case 24:
-      return 'Cache'
-    case 9:
-      return (type._context.displayName || 'Context') + '.Consumer'
-    case 10:
-      return (type.displayName || 'Context') + '.Provider'
-    case 18:
-      return 'DehydratedFragment'
-    case 11:
-    {
-      return (
-        (fiberNode = type.render),
-        (fiberNode = fiberNode.displayName || fiberNode.name || ''),
-        type.displayName ||
-            (fiberNode !== '' ? `ForwardRef(${fiberNode})` : 'ForwardRef')
-      )
-    }
-    case 7:
-      return 'Fragment'
-    case 26:
-    case 27:
-    case 5:
-      return type
-    case 4:
-      return 'Portal'
-    case 3:
-      return 'Root'
-    case 6:
-      return 'Text'
-    case 16:
-      return getNameFromType(type)
-    case 8:
-      return (
-        type === REACT_STRICT_MODE_TYPE
-          ? 'StrictMode'
-          : 'Mode'
-      )
-    case 22:
-      return 'Offscreen'
-    case 12:
-      return 'Profiler'
-    case 21:
-      return 'Scope'
-    case 13:
-      return 'Suspense'
-    case 19:
-      return 'SuspenseList'
-    case 25:
-      return 'TracingMarker'
-    case 1:
-    case 0:
-    case 14:
-    case 15:
-      if (typeof type === 'function') return type.displayName || type.name || null
-      if (typeof type === 'string') return type
-      break
-    case 29:
-    {
-      const type = fiberNode._debugInfo || null
-
-      if (type != null) {
-        let i = type.length - 1
-
-        for (i; i >= 0; i--) {
-          const t = type[i]
-          const n = t.name
-
-          if (typeof n === 'string') return n
-        }
-      }
-
-      if (fiberNode.return !== null) return getType(fiberNode.return)
-    }
-  }
-  return null
-}