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

testing-library · Oct 3, 2019 · f2805d4 · f2805d4
1 parent 594f858
commit f2805d4
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/src/__tests__/debug.js b/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 */
diff --git a/src/pure.js b/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})