feat(debug): allow debugging an array of containers (#495)

Author: danieljcafonso

src/__tests__/debug.js

@@ -19,4 +19,21 @@ test('debug pretty prints the container', () => {
   )
 })
 
+test('debug pretty prints multiple containers', () => {
+  const HelloWorld = () => (
+    <>
+      <h1 data-testid="testId">Hello World</h1>
+      <h1 data-testid="testId">Hello World</h1>
+    </>
+  )
+  const {getAllByTestId, debug} = render(<HelloWorld />)
+  const multipleElements = getAllByTestId('testId')
+  debug(multipleElements)
+
+  expect(console.log).toHaveBeenCalledTimes(2)
+  expect(console.log).toHaveBeenCalledWith(
+    expect.stringContaining('Hello World'),
+  )
+})
+
 /* eslint no-console:0 */

src/pure.js

@@ -60,8 +60,12 @@ function render(
   return {
     container,
     baseElement,
-    // eslint-disable-next-line no-console
-    debug: (el = baseElement) => console.log(prettyDOM(el)),
+    debug: (el = baseElement) =>
+      Array.isArray(el)
+        ? // eslint-disable-next-line no-console
+          el.forEach(e => console.log(prettyDOM(e)))
+        : // eslint-disable-next-line no-console,
+          console.log(prettyDOM(el)),
     unmount: () => ReactDOM.unmountComponentAtNode(container),
     rerender: rerenderUi => {
       render(wrapUiIfNeeded(rerenderUi), {container, baseElement})