feat: add asFragment return value from render (testing-library#192)

<!--
Thanks for your interest in the project. Bugs filed and PRs submitted are appreciated!

Please make sure that you are familiar with and follow the Code of Conduct for
this project (found in the CODE_OF_CONDUCT.md file).

Also, please make sure you're familiar with and follow the instructions in the
contributing guidelines (found in the CONTRIBUTING.md file).

If you're new to contributing to open source projects, you might find this free
video course helpful: http://kcd.im/pull-request

Please fill out the information below to expedite the review and (hopefully)
merge of your pull request!
-->

<!-- What changes are being made? (What feature/bug is being fixed here?) -->

**What**:
Adds the possibility to get a `DocumentFragment` version of the rendered component.

<!-- Why are these changes necessary? -->

**Why**:
I have a test of a connected redux component, and I want to snapshot the diff between them after dispatching an action. Since `container` is a live binding, its `innerHTML` changes, meaning comparison becomes meaningless.

An extra advantage is IMO that you don't need to do `firstChild` on snapshots, as having the `Fragment` wrapper makes sense. At least in my mind 🙂 

<!-- How were these changes implemented? -->

**How**:
By upgrading `kcd-scripts` to a version with Jest 23, and adding a dependency on `JSDOM` which matches the one found in Jest (to not rely on dependency hoisting).

<!-- Have you done all of these things?  -->

**Checklist**:

<!-- add "N/A" to the end of each line that's irrelevant to your changes -->

<!-- to check an item, place an "x" in the box like so: "- [x] Documentation" -->

- [x] Documentation
- [x] Tests
- [x] Ready to be merged
      <!-- In your opinion, is this ready to be merged as soon as it's reviewed? -->
- [ ] Added myself to contributors table
      <!-- this is optional, see the contributing guidelines for instructions -->

<!-- feel free to add additional comments -->

Author: SimenB

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
 }
 
 /**