feat(debug): allow custom element to be passed to debug

Author: bcarroll22

src/__tests__/pretty-print.js

@@ -6,7 +6,7 @@ import { prettyPrint } from '../pretty-print';
 
 test('it prints out the given DOM element tree', () => {
   const { container } = render(<Text>Hello World!</Text>);
-  expect(prettyPrint(container.toJSON())).toMatchInlineSnapshot(`
+  expect(prettyPrint(container)).toMatchInlineSnapshot(`
 "<Text>
   Hello World!
 </Text>"
@@ -15,5 +15,5 @@ test('it prints out the given DOM element tree', () => {
 
 test('it supports truncating the output length', () => {
   const { container } = render(<Text>Hello World!</Text>);
-  expect(prettyPrint(container.toJSON(), 5)).toMatch(/\.\.\./);
+  expect(prettyPrint(container, 5)).toMatch(/\.\.\./);
 });

src/__tests__/render.js

@@ -1,7 +1,14 @@
 import React from 'react';
-import { View } from 'react-native';
+import { Text, View } from 'react-native';
 import { render } from '../';
 
+test('renders View', () => {
+  const ref = React.createRef();
+  const { debug } = render(<View ref={ref} />);
+
+  debug(<Text>hi</Text>);
+});
+
 test('renders View', () => {
   const ref = React.createRef();
   const { rootInstance } = render(<View ref={ref} />);

src/index.js

@@ -21,7 +21,7 @@ function render(ui, { options = {}, wrapper: WrapperComponent } = {}) {
   return {
     container,
     rootInstance: container.root,
-    debug: (el = container) => console.log(prettyPrint(el.toJSON())),
+    debug: (el = container) => console.log(prettyPrint(el)),
     unmount: () => container.unmount(),
     rerender: rerenderUi => {
       container.update(wrapUiIfNeeded(rerenderUi));

src/pretty-print.js

@@ -1,8 +1,7 @@
 import prettyFormat from 'pretty-format';
-
 const { ReactTestComponent, ReactElement } = prettyFormat.plugins;
 
-function prettyPrint(reactElement, maxLength, options) {
+function getPrettyOutput(reactElement, maxLength, options) {
   const debugContent = prettyFormat(reactElement, {
     plugins: [ReactTestComponent, ReactElement],
     printFunctionName: false,
@@ -15,4 +14,12 @@ function prettyPrint(reactElement, maxLength, options) {
     : debugContent;
 }
 
+function prettyPrint(reactElement, ...args) {
+  try {
+    return getPrettyOutput(reactElement.toJSON(), ...args);
+  } catch (e) {
+    return getPrettyOutput(reactElement, ...args);
+  }
+}
+
 export { prettyPrint };