react-component-snapshot 0.0.4 → 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.4",
+  "version": "0.0.5",
   "description": "Transform a React component to match its snapshot in Jest",
   "keywords": [
     "react",

package/src/index.mjs

@@ -1,4 +1,5 @@
 /**
+ *  @typedef {import('@testing-library/react').RenderResult} RenderType
  *  @typedef {ReactComponentSnapshotTypes.FiberNode} FiberNode
  */
 
@@ -93,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/tsconfig.json

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