react-component-snapshot 0.0.3 → 0.0.5

package/README.md

@@ -1,18 +1,38 @@
 # react-component-snapshot
 
-Transform a React component to match its snapshot in Jest
+Transform a React component to match its snapshot in **Jest** with **Testing Library**
 
 ```javascript
 import snapshotOf from 'react-component-snapshot'
+```
+
+## With `@testing-library/react`
+
+```javascript
+import {
+  render
+} from '@testing-library/react'
 
-const {
-  container: {
-    firstElementChild: element
+import snapshotOf from 'react-component-snapshot'
+
+describe('snapshotOf', () => {
+  class Component extends React.Component {
+    render () {
+      return <div />
+    }
   }
-} = render(
-  <Component />
-)
 
-expect(snapshotOf(element))
-  .toMatchSnapshot()
+  it('matches the snapshot', () => {
+    const {
+      container: {
+        firstElementChild: element
+      }
+    } = render(
+      <Component />
+    )
+
+    expect(snapshotOf(element))
+      .toMatchSnapshot()
+  })
+})
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-component-snapshot",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "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

@@ -1,12 +1,23 @@
 /**
+ *  @typedef {import('@testing-library/react').RenderResult} RenderType
  *  @typedef {ReactComponentSnapshotTypes.FiberNode} FiberNode
  */
 
 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
@@ -24,14 +35,6 @@ 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}
@@ -91,15 +94,105 @@ export function getStateNodeProps (stateNode) {
 }
 
 /**
- *  @param {{ container: { firstElementChild: Element | null } }} component
+ *  @param {RenderType} render
  *  @returns {Element | null}
  */
 export function getComponentElement ({
   container: {
-    firstElementChild: element
+    firstElementChild: componentElement = null
   }
 }) {
-  return element
+  return componentElement
+}
+
+/**
+ *  @param {RenderType} render
+ *  @returns {Element | null}
+ */
+export function getComponentElementFromRender (render) {
+  return (
+    getComponentElementFromContainerElement(
+      getContainerElementFromRender(render)
+    )
+  )
+}
+
+/**
+ *  @param {RenderType} render
+ *  @returns {Element}
+ */
+export function getContainerElementFromRender ({
+  container: containerElement
+}) {
+  return containerElement
+}
+
+/**
+ *  @param {Element} containerElement
+ *  @returns {Element | null}
+ */
+function getComponentElementFromContainerElement ({
+  firstElementChild: componentElement = null
+}) {
+  return componentElement
+}
+
+/**
+ *  @param {RenderType} render
+ *  @returns {Record<PropertyKey, unknown> | null}
+ */
+export function toSnapshotFromRender (render) {
+  const element = getComponentElementFromRender(render)
+
+  if (element instanceof HTMLElement) {
+    const fiberNode = getFiber(element)
+
+    if (fiberNode) {
+      return (
+        transform(fiberNode)
+      )
+    }
+  }
+
+  return null
+}
+
+/**
+ *  @param {Element} containerElement
+ *  @returns {Record<PropertyKey, unknown> | null}
+ */
+export function toSnapshotFromContainerElement (containerElement) {
+  const element = getComponentElementFromContainerElement(containerElement)
+
+  if (element instanceof HTMLElement) {
+    const fiberNode = getFiber(element)
+
+    if (fiberNode) {
+      return (
+        transform(fiberNode)
+      )
+    }
+  }
+
+  return null
+}
+
+/**
+ *  @param {Element | null} componentElement
+ *  @returns {Record<PropertyKey, unknown> | null}
+ */
+export function toSnapshotFromComponentElement (componentElement) {
+  if (componentElement instanceof HTMLElement) {
+    const fiberNode = getFiber(componentElement)
+
+    if (fiberNode) {
+      return (
+        transform(fiberNode)
+      )
+    }
+  }
+
+  return null
 }
 
 /**

package/src/symbols.mjs

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

package/src/react/ReactSymbols.mjs

@@ -1,28 +0,0 @@
-/**
- * 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

@@ -1,145 +0,0 @@
-/**
- * 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,182 +0,0 @@
-// @ts-nocheck
-
-/**
- *  @typedef {ReactComponentSnapshotTypes.FiberNode} FiberNode
- */
-
-import debug from 'debug'
-
-const log = debug('react-component-snapshot')
-
-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_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_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
-
-  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:
-        return getNameFromRef(type, type.render, 'ForwardRef')
-
-      case REACT_MEMO_TYPE:
-        return (
-          type.displayName || getNameFromType(type.type) || 'Memo'
-        )
-
-      case REACT_LAZY_TYPE:
-      {
-        const payload = type._payload
-        const init = type._init
-
-        try {
-          return getNameFromType(init(payload))
-        } catch ({ message }) {
-          log(`Lazy Component error. Message was "${message}"`)
-        }
-      }
-    }
-  }
-
-  return null
-}
-
-/**
- * @param {FiberNode} fiberNode
- * @returns {string | 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 getNameFromRef(type, type.render, '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
-      return null
-    case 29:
-    {
-      const info = fiberNode._debugInfo || null
-
-      if (info != null) {
-        let i = info.length - 1
-
-        for (i; i >= 0; i--) {
-          const t = info[i]
-          const n = t.name
-
-          if (typeof n === 'string') return n
-        }
-      }
-
-      if (fiberNode.return !== null) return getType(fiberNode.return)
-    }
-  }
-
-  return null
-}

package/tsconfig.json

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