feat(test-utils): add displayEl option

src/__tests__/test-utils.tsx

@@ -13,9 +13,15 @@ test('gives a nice error', () => {
 test('can use a function a nice error', () => {
   expect(() =>
     alfredTip(() => expect(true).toBe(false), 'This is an extra error'),
-  ).toThrow()
+  ).toThrowError(/this is an extra error/i)
 })
 
 test('does nothing if shouldThrow is false', () => {
   alfredTip(false, 'This is an extra error')
 })
+
+test('prints an element', () => {
+  expect(() =>
+    alfredTip(true, 'oh no', {displayEl: () => document.createElement('div')}),
+  ).toThrowError(/oh no.*<div \/>/is)
+})

src/test-utils.tsx

@@ -1,8 +1,10 @@
 import chalk from 'chalk'
+import {prettyDOM} from '@testing-library/react'
 
 function alfredTip(
   shouldThrow: unknown | (() => unknown),
   tip: string | ((error: unknown) => string),
+  {displayEl}: {displayEl?: true | ((error: unknown) => HTMLElement)} = {},
 ) {
   let caughtError
   if (typeof shouldThrow === 'function') {
@@ -19,6 +21,11 @@ function alfredTip(
   const error = new Error(chalk.red(`🚨 ${tipString}`))
   // get rid of the stack to avoid the noisy codeframe
   error.stack = ''
+  if (displayEl) {
+    const el =
+      typeof displayEl === 'function' ? displayEl(caughtError) : document.body
+    error.message += `\n\n${chalk.reset(prettyDOM(el))}`
+  }
   throw error
 }