feat(prettyDOM): add helpful error message (#367)

mbelsky · Kent C. Dodds · Kent C. Dodds · commit 99760f08a9f0 · 2019-10-07T13:56:08.000-06:00
Co-authored-by: Kent C. Dodds &lt;kent+github@doddsfamily.us&gt;
diff --git a/src/__tests__/pretty-dom.js b/src/__tests__/pretty-dom.js
@@ -26,14 +26,16 @@ test('prettyDOM supports truncating the output length', () => {
 })
 
 test('prettyDOM defaults to document.body', () => {
+  const defaultInlineSnapshot = `
+  "<body>
+    <div>
+      Hello World!
+    </div>
+  </body>"
+`
   renderIntoDocument('<div>Hello World!</div>')
-  expect(prettyDOM()).toMatchInlineSnapshot(`
-    "<body>
-      <div>
-        Hello World!
-      </div>
-    </body>"
-  `)
+  expect(prettyDOM()).toMatchInlineSnapshot(defaultInlineSnapshot)
+  expect(prettyDOM(null)).toMatchInlineSnapshot(defaultInlineSnapshot)
 })
 
 test('prettyDOM supports receiving the document element', () => {
@@ -58,4 +60,22 @@ test('logDOM logs prettyDOM to the console', () => {
   `)
 })
 
+describe('prettyDOM fails with first parameter without outerHTML field', () => {
+  test('with array', () => {
+    expect(() => prettyDOM(['outerHTML'])).toThrowErrorMatchingInlineSnapshot(
+      `"Expected an element or document but got Array"`,
+    )
+  })
+  test('with number', () => {
+    expect(() => prettyDOM(1)).toThrowErrorMatchingInlineSnapshot(
+      `"Expected an element or document but got number"`,
+    )
+  })
+  test('with object', () => {
+    expect(() => prettyDOM({})).toThrowErrorMatchingInlineSnapshot(
+      `"Expected an element or document but got Object"`,
+    )
+  })
+})
+
 /* eslint no-console:0 */
diff --git a/src/pretty-dom.js b/src/pretty-dom.js
@@ -20,18 +20,34 @@ const getMaxLength = dom =>
 
 const {DOMElement, DOMCollection} = prettyFormat.plugins
 
-function prettyDOM(
-  dom = getDocument().body,
-  maxLength = getMaxLength(dom),
-  options,
-) {
+function prettyDOM(dom, maxLength, options) {
+  if (!dom) {
+    dom = getDocument().body
+  }
+  if (typeof maxLength !== 'number') {
+    maxLength = getMaxLength(dom)
+  }
+
   if (maxLength === 0) {
     return ''
   }
   if (dom.documentElement) {
     dom = dom.documentElement
   }
 
+  let domTypeName = typeof dom
+  if (domTypeName === 'object') {
+    domTypeName = dom.constructor.name
+  } else {
+    // To don't fall with `in` operator
+    dom = {}
+  }
+  if (!('outerHTML' in dom)) {
+    throw new TypeError(
+      `Expected an element or document but got ${domTypeName}`,
+    )
+  }
+
   const debugContent = prettyFormat(dom, {
     plugins: [DOMElement, DOMCollection],
     printFunctionName: false,
