feat: add asFragment return value from render

README.md

@@ -99,7 +99,9 @@ test('Fetch makes an API call and displays the greeting when load-greeting is cl
   // Arrange
   axiosMock.get.mockResolvedValueOnce({data: {greeting: 'hello there'}})
   const url = '/greeting'
-  const {getByText, getByTestId, container} = render(<Fetch url={url} />)
+  const {getByText, getByTestId, container, asFragment} = render(
+    <Fetch url={url} />,
+  )
 
   // Act
   fireEvent.click(getByText('Load Greeting'))
@@ -119,6 +121,8 @@ test('Fetch makes an API call and displays the greeting when load-greeting is cl
   expect(getByTestId('ok-button')).toHaveAttribute('disabled')
   // snapshots work great with regular DOM nodes!
   expect(container.firstChild).toMatchSnapshot()
+  // you can also use get a `DocumentFragment`, which is useful if you want to compare nodes across render
+  expect(asFragment()).toMatchSnapshot()
 })
 ```
 
@@ -547,6 +551,38 @@ const usernameInputElement = getByTestId('username-input')
 > about `data-testid`s from the blog post ["Making your UI tests resilient to
 > change"][data-testid-blog-post]
 
+#### `asFragment(): DocumentFragment`
+
+Returns a `DocumentFragment` of your rendered component. This can be useful if
+you need to avoid live bindings and see how your component reacts to events.
+
+```javascript
+import {render, fireEvent} from 'react-testing-library'
+
+class TestComponent extends React.Component {
+  constructor() {
+    super()
+    this.state = {count: 0}
+  }
+
+  render() {
+    const {count} = this.state
+
+    return <button onClick={() => this.setState({count: count + 1})}>Click to increase: {count}</div>
+  }
+}
+
+const {getByText, asFragment} = render(<TestComponent />)
+const firstRender = asFragment()
+
+fireEvent.click(getByText(/Click to increase/))
+
+// This will snapshot only the difference between the first render, and the
+// state of the DOM after the click event.
+// See https://github.com/jest-community/snapshot-diff
+expect(firstRender).toMatchDiffSnapshot(asFragment())
+```
+
 ### `cleanup`
 
 Unmounts React trees that were mounted with [render](#render).

package.json

@@ -47,7 +47,7 @@
     "history": "^4.7.2",
     "jest-dom": "^1.3.1",
     "jest-in-case": "^1.0.2",
-    "kcd-scripts": "^0.39.1",
+    "kcd-scripts": "^0.42.0",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
     "react-redux": "^5.0.7",

src/__tests__/__snapshots__/render.js.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`supports fragments 1`] = `
+<DocumentFragment>
+  <div>
+    <code>
+      DocumentFragment
+    </code>
+     is pretty cool!
+  </div>
+</DocumentFragment>
+`;

src/__tests__/render.js

@@ -73,3 +73,20 @@ it('cleansup document', () => {
   expect(document.body.innerHTML).toBe('')
   expect(spy).toHaveBeenCalledTimes(1)
 })
+
+it('supports fragments', () => {
+  class Test extends React.Component {
+    render() {
+      return (
+        <div>
+          <code>DocumentFragment</code> is pretty cool!
+        </div>
+      )
+    }
+  }
+
+  const {asFragment} = render(<Test />)
+  expect(asFragment()).toMatchSnapshot()
+  cleanup()
+  expect(document.body.innerHTML).toBe('')
+})

src/index.js

@@ -29,6 +29,17 @@ function render(ui, {container, baseElement = container, queries} = {}) {
       // Intentionally do not return anything to avoid unnecessarily complicating the API.
       // folks can use all the same utilities we return in the first place that are bound to the container
     },
+    asFragment: () => {
+      if (typeof document.createRange === 'function') {
+        return document
+          .createRange()
+          .createContextualFragment(container.innerHTML)
+      }
+
+      const template = document.createElement('template')
+      template.innerHTML = container.innerHTML
+      return template.content
+    },
     ...getQueriesForElement(baseElement, queries),
   }
 }

typings/index.d.ts

@@ -7,9 +7,10 @@ type GetsAndQueries = ReturnType<typeof getQueriesForElement>
 export interface RenderResult extends GetsAndQueries {
   container: HTMLElement
   baseElement: HTMLElement
-  debug: (baseElement?: HTMLElement) => void
+  debug: (baseElement?: HTMLElement | DocumentFragment) => void
   rerender: (ui: React.ReactElement<any>) => void
   unmount: () => boolean
+  asFragment: () => DocumentFragment
 }
 
 /**