feat: make debug.deep more usable

README.md

@@ -295,6 +295,7 @@ There's also `debug.deep` that renders deeply to stdout.
 import { debug } from 'react-native-testing-library';
 
 debug.deep(<Component />);
+debug.deep(toJSON(), 'actually debug JSON too'); // useful when Component state changes
 ```
 
 logs:

src/__tests__/__snapshots__/debug.test.js.snap

@@ -3,10 +3,10 @@
 exports[`debug 1`] = `
 "<TouchableOpacity
   activeOpacity={0.2}
-  onPress={[Function bound fn]}
+  onPress={[Function _callee]}
 >
   <TextComponent
-    text=\\"Press me\\"
+    text=\\"Press me 0\\"
   />
 </TouchableOpacity>"
 `;
@@ -28,7 +28,29 @@ exports[`debug.deep 1`] = `
   }
 >
   <Text>
-    Press me
+    Press me 0
+  </Text>
+</View>"
+`;
+
+exports[`debug.deep async test 1`] = `
+"<View
+  accessible={true}
+  isTVSelectable={true}
+  onResponderGrant={[Function bound touchableHandleResponderGrant]}
+  onResponderMove={[Function bound touchableHandleResponderMove]}
+  onResponderRelease={[Function bound touchableHandleResponderRelease]}
+  onResponderTerminate={[Function bound touchableHandleResponderTerminate]}
+  onResponderTerminationRequest={[Function bound touchableHandleResponderTerminationRequest]}
+  onStartShouldSetResponder={[Function bound touchableHandleStartShouldSetResponder]}
+  style={
+    Object {
+      \\"opacity\\": 1,
+    }
+  }
+>
+  <Text>
+    Press me 1
   </Text>
 </View>"
 `;

src/__tests__/debug.test.js

@@ -3,17 +3,26 @@
 import React from 'react';
 import { TouchableOpacity, Text } from 'react-native';
 import stripAnsi from 'strip-ansi';
-import { debug } from '..';
+import { debug, render, fireEvent, flushMicrotasksQueue } from '..';
 
 function TextComponent({ text }) {
   return <Text>{text}</Text>;
 }
 
-class Button extends React.Component<*> {
+class Button extends React.Component<*, *> {
+  state = { counter: 0 };
+
+  onPress = async () => {
+    await Promise.resolve();
+
+    this.setState({ counter: 1 });
+    this.props.onPress();
+  };
+
   render() {
     return (
-      <TouchableOpacity onPress={this.props.onPress}>
-        <TextComponent text={this.props.text} />
+      <TouchableOpacity onPress={this.onPress}>
+        <TextComponent text={`${this.props.text} ${this.state.counter}`} />
       </TouchableOpacity>
     );
   }
@@ -58,3 +67,20 @@ test('debug.deep', () => {
 
   expect(console.log).toBeCalledWith(output, 'test message');
 });
+
+test('debug.deep async test', async () => {
+  // $FlowFixMe
+  console.log = jest.fn();
+  const { toJSON, getByName } = render(
+    <Button onPress={jest.fn} text="Press me" />
+  );
+
+  fireEvent.press(getByName('TouchableOpacity'));
+  await flushMicrotasksQueue();
+
+  debug.deep(toJSON());
+
+  const output = console.log.mock.calls[0][0];
+
+  expect(stripAnsi(output)).toMatchSnapshot();
+});

src/debug.js

@@ -20,10 +20,19 @@ function debugShallow(
 /**
  * Log pretty-printed deep test component instance
  */
-function debugDeep(instance: React.Element<*>, message?: any) {
-  const { toJSON } = render(instance);
-
-  console.log(format(toJSON()), message || '');
+function debugDeep(
+  instance: React.Element<*> | ?ReactTestRendererJSON,
+  message?: any = ''
+) {
+  try {
+    // We're assuming React.Element<*> here and fallback to
+    // rendering ?ReactTestRendererJSON
+    // $FlowFixMe
+    const { toJSON } = render(instance);
+    console.log(format(toJSON()), message);
+  } catch (e) {
+    console.log(format(instance), message);
+  }
 }
 
 const format = input =>

typings/__tests__/index.test.tsx

@@ -90,6 +90,7 @@ debug.shallow(<TestComponent />);
 debug.shallow(<TestComponent />, 'message');
 debug.deep(<TestComponent />);
 debug.deep(<TestComponent />, 'message');
+debug.deep(tree.toJSON());
 
 const waitBy: Promise<ReactTestInstance> = waitForElement<ReactTestInstance>(
   () => tree.getByName('View')

typings/index.d.ts

@@ -58,7 +58,10 @@ export type DebugFunction = (
 
 export type DebugAPI = DebugFunction & {
   shallow: DebugFunction;
-  deep: (instance: React.ReactElement<any>, message?: string) => void;
+  deep: (
+    instance: React.ReactElement<any> | ReactTestRendererJSON | null,
+    message?: string
+  ) => void;
 };
 
 export declare const render: (