diff --git a/README.md b/README.md
index 7b41569c..c5e2c94d 100644
--- a/README.md
+++ b/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).
diff --git a/package.json b/package.json
index 9348a913..5be30924 100644
--- a/package.json
+++ b/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",
diff --git a/src/__tests__/__snapshots__/render.js.snap b/src/__tests__/__snapshots__/render.js.snap
new file mode 100644
index 00000000..eaf41443
--- /dev/null
+++ b/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>
+`;
diff --git a/src/__tests__/render.js b/src/__tests__/render.js
index 0f9388bf..5ee0dc6f 100644
--- a/src/__tests__/render.js
+++ b/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('')
+})
diff --git a/src/index.js b/src/index.js
index d8258a23..5e1a9d18 100644
--- a/src/index.js
+++ b/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),
   }
 }
diff --git a/typings/index.d.ts b/typings/index.d.ts
index 796e036b..6dcb7a2d 100644
--- a/typings/index.d.ts
+++ b/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
 }
 
 /**