react-component-snapshot 0.0.0

package/README.md

@@ -0,0 +1,18 @@
+# react-component-snapshot
+
+Transform a React component to match its snapshot in Jest
+
+```javascript
+import snapshotOf from 'react-component-snapshot'
+
+const {
+  container: {
+    firstElementChild
+  }
+} = render(
+  <Component />
+)
+
+expect(snapshotOf(element))
+  .toMatchSnapshot()
+```

package/index.d.mts

@@ -0,0 +1,74 @@
+import type React from 'react'
+
+declare global {
+  namespace ReactComponentSnapshotTypes {
+    /**
+     *  https://github.com/bendtherules/react-fiber-traverse
+     */
+
+    export type FiberNode =
+      | FiberNodeForClassComponent
+      | FiberNodeForFunctionComponent
+      | FiberNodeForInstrinsicElement
+      | FiberNodeForTextNode
+
+    export interface FiberRootNode {
+      child: FiberNode
+      sibling: FiberNode | null
+
+      elementType: React.FunctionComponent
+      type: React.FunctionComponent
+
+      stateNode: {
+        current: FiberRootNode
+      }
+      return?: FiberRootNode // | null
+    }
+
+    export interface FiberNodeForFunctionComponent {
+      child: FiberNode | null
+      sibling: FiberNode | null
+
+      elementType: React.FunctionComponent
+      type: React.FunctionComponent
+
+      stateNode: null
+      return?: FiberNode // | null
+    }
+
+    export interface FiberNodeForClassComponent {
+      child: FiberNode | null
+      sibling: FiberNode | null
+
+      elementType: React.ComponentClass
+      type: React.ComponentClass
+
+      stateNode: React.Component
+      return?: FiberNode // | null
+    }
+
+    export interface FiberNodeForInstrinsicElement {
+      child: FiberNode | null
+      sibling: FiberNode | null
+
+      elementType: keyof React.JSX.IntrinsicElements
+      type: keyof React.JSX.IntrinsicElements
+
+      stateNode: HTMLElement
+      return?: FiberNode
+    }
+
+    export interface FiberNodeForTextNode {
+      child: null
+      sibling: FiberNode | null
+
+      elementType: null
+      type: null
+
+      stateNode: Text
+      return?: FiberNode
+    }
+  }
+}
+
+export {}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "react-component-snapshot",
+  "version": "0.0.0",
+  "description": "Transform a React component to match its snapshot in Jest",
+  "keywords": [
+    "react",
+    "component",
+    "snapshot"
+  ],
+  "main": "./src/index.mjs",
+  "type": "module",
+  "types": "./index.d.mts",
+  "author": {
+    "name": "Jonathan Perry for Modern Poacher Limited",
+    "email": "jonathanperry@modernpoacher.com",
+    "url": "https://modernpoacher.com"
+  },
+  "license": "ISC",
+  "engines": {
+    "node": ">=18.12.0 <=21.7.3 || >=22.2.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/modernpoacher/react-component-snapshot.git"
+  },
+  "scripts": {
+    "lint": "eslint",
+    "lint:fix": "npm run lint -- --fix",
+    "test": "NODE_ENV=test jest"
+  },
+  "dependencies": {
+    "debug": "^4.4.0"
+  },
+  "devDependencies": {
+    "@sequencemedia/eslint-config-standard": "^0.2.43",
+    "@sequencemedia/eslint-config-typescript": "^0.1.62",
+    "@types/debug": "^4.1.12",
+    "@types/react": "19.0.11",
+    "@typescript-eslint/parser": "^8.26.1",
+    "eslint": "^9.22.0",
+    "globals": "^16.0.0",
+    "react": "19.0.0"
+  },
+  "imports": {
+    "#react-component-snapshot": "./src/index.mjs"
+  },
+  "exports": {
+    ".": "./src/index.mjs"
+  }
+}

package/src/index.mjs

@@ -0,0 +1,238 @@
+/**
+ *  @typedef {ReactComponentSnapshotTypes.FiberNode} FiberNode
+ */
+
+import {
+  getType
+} from './react.mjs'
+
+const REACT_COMPONENT_SNAPSHOT = Symbol.for('react.test.json')
+
+/**
+ *  @param {PropertyKey} key
+ *  @returns {boolean}
+ */
+export function isReactFiberKey (key) {
+  return String(key).startsWith('__reactFiber$')
+}
+
+/**
+ *  @param {PropertyKey} key
+ *  @returns {boolean}
+ */
+export function isReactPropsKey (key) {
+  return String(key).startsWith('__reactProps$')
+}
+
+/**
+ *  @param {Element | Text | React.Component<any, any, any>} stateNode
+ *  @returns {string | undefined}
+ */
+export function getReactFiberKey (stateNode) {
+  return (
+    Object.keys(stateNode)
+      .find(isReactFiberKey)
+  )
+}
+
+/**
+ *  @param {Element | Text | React.Component<any, any, any>} stateNode
+ *  @returns {string | undefined}
+ */
+export function getReactPropsKey (stateNode) {
+  return (
+    Object.keys(stateNode)
+      .find(isReactPropsKey)
+  )
+}
+
+/**
+ * @param {Element | Text | React.Component<any, any, any>} stateNode
+ * @returns {Record<PropertyKey, unknown> | null}
+ */
+export function getStateNodeFiber (stateNode) {
+  const key = getReactFiberKey(stateNode)
+
+  if (key) {
+    const { // @ts-expect-error
+      [key]: fiber = null
+    } = stateNode
+
+    return fiber
+  }
+
+  return null
+}
+
+/**
+ * @param {React.Component<any, any, any> | Element | Text} stateNode
+ * @returns {Record<PropertyKey, unknown> | null}
+ */
+export function getStateNodeProps (stateNode) {
+  const key = getReactPropsKey(stateNode)
+
+  if (key) {
+    const { // @ts-expect-error
+      [key]: props = null
+    } = stateNode
+
+    return props
+  }
+
+  return null
+}
+
+/**
+ *  @param {Element} element
+ *  @returns {FiberNode | null}
+ */
+function getFiber (element) {
+  const key = getReactFiberKey(element)
+
+  if (key) {
+    const { // @ts-expect-error
+      [key]: fiber = null
+    } = element
+
+    return fiber
+  }
+
+  return null
+}
+
+/**
+ *  @param {FiberNode} fiberNode
+ *  @returns {FiberNode[]}
+ */
+function getSiblings (fiberNode) {
+  const siblings = []
+
+  let sibling = fiberNode.sibling
+  while (sibling) {
+    siblings.push(sibling)
+    sibling = sibling.sibling
+  }
+
+  return siblings
+}
+
+/**
+ *  @param {FiberNode} fiberNode
+ *  @returns {Record<PropertyKey, unknown>}
+ */
+function getProps (fiberNode) {
+  const stateNode = fiberNode.stateNode
+
+  /**
+   *  State node may be null on class components
+   */
+  if (stateNode) {
+    const props = getStateNodeProps(stateNode) ?? {}
+
+    return (
+      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)
+            return true
+          })
+      )
+    )
+  }
+
+  return {}
+}
+
+/**
+ *  @param {FiberNode} fiberNode
+ *  @returns {Array<string | FiberNode>}
+ */
+function getChildren (fiberNode) {
+  const child = fiberNode.child
+
+  if (child) {
+    const siblings = getSiblings(child)
+
+    return [child].concat(siblings).map((child) => {
+      const stateNode = child.stateNode
+
+      if (stateNode instanceof Text) {
+        return stateNode.data
+      }
+
+      return child
+    })
+  }
+
+  const stateNode = fiberNode.stateNode
+
+  if (stateNode) {
+    /**
+     *  Get the text as a prop from the instance
+     */
+    const {
+      children
+    } = getStateNodeProps(stateNode) ?? {}
+
+    if (typeof children === 'string') {
+      return [children]
+    }
+  }
+
+  return []
+}
+
+/**
+ *  @param {FiberNode | string} child
+ *  @returns {string | Record<PropertyKey, unknown>}
+ */
+function toChildren (child) {
+  if (typeof child === 'string') return child
+
+  return (
+    transform(child)
+  )
+}
+
+/**
+ *  @param {FiberNode} fiberNode
+ *  @returns {Record<PropertyKey, unknown>}
+ */
+function transform (fiberNode) {
+  const type = getType(fiberNode)
+  const props = getProps(fiberNode)
+  const children = (
+    getChildren(fiberNode)
+      .map(toChildren)
+  )
+
+  return (
+    Object.defineProperty({
+      type,
+      props,
+      children
+    },
+    '$$typeof', {
+      value: REACT_COMPONENT_SNAPSHOT
+    })
+  )
+}
+
+/**
+ * @param {Element | null | undefined} element
+ * @returns {Record<PropertyKey, unknown> | null}
+ */
+export default function snapshotOf (element) {
+  if (element instanceof HTMLElement) {
+    const fiberNode = getFiber(element)
+
+    if (fiberNode) {
+      return (
+        transform(fiberNode)
+      )
+    }
+  }
+
+  return null
+}

package/src/react.mjs

@@ -0,0 +1,185 @@
+// @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
+}

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "module": "NodeNext",
+    "target": "ESNext",
+    "allowJs": true,
+    "checkJs": true,
+    "noEmit": true,
+    "strict": true,
+    "jsx": "react"
+  },
+  "include": [
+    "."
+  ]
+}