react-component-snapshot 0.0.4 → 0.0.6

package/README.md

@@ -1,18 +1,79 @@
 # 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`
+
+Get a snapshot of the component element from the `render` result
+
+```javascript
+import {
+  render
+} from '@testing-library/react'
+
+import {
+  toSnapshot
+} from 'react-component-snapshot'
+
+describe('`toSnapshot`', () => {
+  it('matches the snapshot', () => {
+    function Component () {
+      return (
+        <div className='grand-parent'>
+          <div className='parent'>
+            <div className='child'>
+              TEXT
+            </div>
+          </div>
+        </div>
+      )
+    }
 
-const {
-  container: {
-    firstElementChild: element
+    expect(toSnapshot(render(
+      <Component />
+    )))
+      .toMatchSnapshot()
+  })
+})
+```
+
+Get a snapshot of any component element
+
+```javascript
+import {
+  render
+} from '@testing-library/react'
+
+import {
+  snapshotOf
+} from 'react-component-snapshot'
+
+describe('`snapshotOf`', () => {
+  function Component () {
+    return (
+      <div className='grand-parent'>
+        <div className='parent'>
+          <div className='child'>
+            TEXT
+          </div>
+        </div>
+      </div>
+    )
   }
-} = render(
-  <Component />
-)
 
-expect(snapshotOf(element))
-  .toMatchSnapshot()
+  it('matches the snapshot', () => {
+    const {
+      container
+    } = render(
+      <Component />
+    )
+
+    expect(snapshotOf(container.querySelector('.child')))
+      .toMatchSnapshot()
+  })
+})
 ```

package/package.json

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

package/src/fiber/index.mjs

@@ -0,0 +1,239 @@
+/**
+ *  @typedef {import('@testing-library/react').RenderResult} RenderType
+ *  @typedef {ReactComponentSnapshotTypes.FiberNode} FiberNode
+ */
+
+import {
+  getComponentNameFromFiber as getType
+} from 'react-component-name'
+
+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
+ *  @returns {boolean}
+ */
+function isReactFiberKey (key) {
+  return String(key).startsWith('__reactFiber$')
+}
+
+/**
+ *  @param {PropertyKey} key
+ *  @returns {boolean}
+ */
+function isReactPropsKey (key) {
+  return String(key).startsWith('__reactProps$')
+}
+
+/**
+ *  @param {Element | Text | React.Component<any, any, any>} stateNode
+ *  @returns {string | undefined}
+ */
+function getReactFiberKey (stateNode) {
+  return (
+    Object.keys(stateNode)
+      .find(isReactFiberKey)
+  )
+}
+
+/**
+ *  @param {Element | Text | React.Component<any, any, any>} stateNode
+ *  @returns {string | undefined}
+ */
+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}
+ */
+export 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]) => {
+            if (isObject(value)) return !('current' in value)
+            return true
+          })
+      )
+    )
+  }
+
+  return {}
+}
+
+/**
+ *  @param {FiberNode} fiberNode
+ *  @returns {Array<string | FiberNode>}
+ */
+function getChildrenOf (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 (
+    getSnapshot(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>}
+ */
+export default function getSnapshot (fiberNode) {
+  const type = getType(fiberNode)
+  const props = getProps(fiberNode)
+  const children = getChildren(fiberNode)
+
+  return (
+    Object.defineProperty({
+      type,
+      props,
+      children
+    },
+    '$$typeof', {
+      value: REACT_COMPONENT_SNAPSHOT
+    })
+  )
+}

package/src/index.mjs

@@ -1,268 +1,132 @@
 /**
+ *  @typedef {import('@testing-library/react').RenderResult} RenderType
  *  @typedef {ReactComponentSnapshotTypes.FiberNode} FiberNode
  */
 
-import {
-  getComponentNameFromFiber as getType
-} from 'react-component-name'
-
-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
- *  @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$')
-}
+import getSnapshot, {
+  getFiber
+} from './fiber/index.mjs'
 
 /**
- *  @param {Element | Text | React.Component<any, any, any>} stateNode
- *  @returns {string | undefined}
+ *  @param {RenderType} render
+ *  @returns {Element | null}
  */
-export function getReactFiberKey (stateNode) {
-  return (
-    Object.keys(stateNode)
-      .find(isReactFiberKey)
-  )
+export function getComponentElement ({
+  container: {
+    firstElementChild: componentElement = null
+  }
+}) {
+  return componentElement
 }
 
 /**
- *  @param {Element | Text | React.Component<any, any, any>} stateNode
- *  @returns {string | undefined}
+ *  @param {RenderType} render
+ *  @returns {Element | null}
  */
-export function getReactPropsKey (stateNode) {
+export function getComponentElementFromRender (render) {
   return (
-    Object.keys(stateNode)
-      .find(isReactPropsKey)
+    getComponentElementFromContainerElement(
+      getContainerElementFromRender(render)
+    )
   )
 }
 
 /**
- *  @param {Element | Text | React.Component<any, any, any>} stateNode
- *  @returns {Record<PropertyKey, unknown> | null}
+ *  @param {RenderType} render
+ *  @returns {Element}
  */
-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
+export function getContainerElementFromRender ({
+  container: containerElement
+}) {
+  return containerElement
 }
 
 /**
- *  @param {{ container: { firstElementChild: Element | null } }} component
+ *  @param {Element} containerElement
  *  @returns {Element | null}
  */
-export function getComponentElement ({
-  container: {
-    firstElementChild: element
-  }
+function getComponentElementFromContainerElement ({
+  firstElementChild: componentElement = null
 }) {
-  return element
+  return componentElement
 }
 
 /**
- *  @param {Element} element
- *  @returns {FiberNode | null}
+ *  @param {RenderType} render
+ *  @returns {Record<PropertyKey, unknown> | null}
  */
-function getFiber (element) {
-  const key = getReactFiberKey(element)
+export function toSnapshotFromRender (render) {
+  const element = getComponentElementFromRender(render)
 
-  if (key) {
-    const { // @ts-expect-error
-      [key]: fiber = null
-    } = element
+  if (element instanceof HTMLElement) {
+    const fiberNode = getFiber(element)
 
-    return fiber
+    if (fiberNode) {
+      return (
+        getSnapshot(fiberNode)
+      )
+    }
   }
 
   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>}
+ *  @param {Element} containerElement
+ *  @returns {Record<PropertyKey, unknown> | null}
  */
-function getProps (fiberNode) {
-  const stateNode = fiberNode.stateNode
+export function toSnapshotFromContainerElement (containerElement) {
+  const element = getComponentElementFromContainerElement(containerElement)
 
-  /**
-   *  State node may be null on class components
-   */
-  if (stateNode) {
-    const props = getStateNodeProps(stateNode) ?? {}
+  if (element instanceof HTMLElement) {
+    const fiberNode = getFiber(element)
 
-    return (
-      Object.fromEntries(
-        Object.entries(props)
-          .filter(([key]) => key !== 'children')
-          .filter(([key, value]) => {
-            if (isObject(value)) return !('current' in value)
-            return true
-          })
+    if (fiberNode) {
+      return (
+        getSnapshot(fiberNode)
       )
-    )
+    }
   }
 
-  return {}
+  return null
 }
 
 /**
- *  @param {FiberNode} fiberNode
- *  @returns {Array<string | FiberNode>}
+ *  @param {Element | null} [componentElement]
+ *  @returns {Record<PropertyKey, unknown> | null}
  */
-function getChildrenOf (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
-      }
+export function toSnapshotFromComponentElement (componentElement) {
+  if (componentElement instanceof HTMLElement) {
+    const fiberNode = getFiber(componentElement)
 
-      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]
+    if (fiberNode) {
+      return (
+        getSnapshot(fiberNode)
+      )
     }
   }
 
-  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 {Array<string | Record<PropertyKey, unknown>>}
- */
-function getChildren (fiberNode) {
-  return (
-    getChildrenOf(fiberNode)
-      .map(toChildren)
-  )
-}
-
-/**
- *  @param {FiberNode} fiberNode
- *  @returns {Record<PropertyKey, unknown>}
- */
-function transform (fiberNode) {
-  const type = getType(fiberNode)
-  const props = getProps(fiberNode)
-  const children = getChildren(fiberNode)
-
-  return (
-    Object.defineProperty({
-      type,
-      props,
-      children
-    },
-    '$$typeof', {
-      value: REACT_COMPONENT_SNAPSHOT
-    })
-  )
+  return null
 }
 
 /**
- *  @param {Element | null | undefined} element
+ *  @param {Element | null} [element]
  *  @returns {Record<PropertyKey, unknown> | null}
  */
-export default function snapshotOf (element) {
+export function snapshotOf (element) {
   if (element instanceof HTMLElement) {
     const fiberNode = getFiber(element)
 
     if (fiberNode) {
       return (
-        transform(fiberNode)
+        getSnapshot(fiberNode)
       )
     }
   }
 
   return null
 }
+
+export {
+  toSnapshotFromRender as toSnapshot
+}

package/tsconfig.json

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