feat: add debug

Author: Ben Monro

src/index.js

@@ -1,4 +1,4 @@
-import {getQueriesForElement} from 'dom-testing-library'
+import {getQueriesForElement, prettyDOM} from 'dom-testing-library'
 
 export * from 'dom-testing-library'
 const mountedContainers = new Set()
@@ -13,6 +13,8 @@ export const render = (Component, options) => {
   mountedContainers.add(component)
   return {
     component,
+    // eslint-disable-next-line no-console
+    debug: (el = document.body) => console.log(prettyDOM(el)),
     ...getQueriesForElement(document.body),
   }
 }

tests/queries.spec.js renamed to tests/render.spec.js

@@ -1,9 +1,16 @@
-import {render, fireEvent, wait, waitForElement, cleanup} from '../src'
+import {
+  render,
+  fireEvent,
+  wait,
+  waitForElement,
+  cleanup,
+  prettyDOM,
+} from '../src'
 import App from './example/App.svelte'
 import 'jest-dom/extend-expect'
 
 afterEach(cleanup)
-describe('queries', () => {
+describe('render', () => {
   test('getByText', () => {
     const {getByText} = render(App, {props: {name: 'world'}})
 
@@ -29,4 +36,14 @@ describe('queries', () => {
 
     await wait(() => expect(getByText('Hello foo!')).toBeInTheDocument())
   })
+
+  test('debug', () => {
+    global.console = {log: jest.fn()}
+
+    const {debug} = render(App)
+
+    debug()
+
+    expect(global.console.log).toHaveBeenCalledWith(prettyDOM(document.body))
+  })
 })