feat: make debug.deep more usable (#40)

<!-- Please provide enough information so that others can review your pull request. -->
<!-- Keep pull requests small and focused on a single change. -->

### Summary

Make `debug.deep` more usable by allowing it to print arbitrary JSON (and actually any) files. This proves handy when we want to debug async component which we want to snapshot after async operations:

```jsx
const { toJSON, getByName } = render(
  <Button onPress={jest.fn} text="Press me" />
);
fireEvent.press(getByName('TouchableOpacity'));
await flushMicrotasksQueue();

debug.deep(toJSON());
```

### Test plan

added one

Author: thymikee

Diff for: 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:

Diff for: 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>"
 `;

Diff for: 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();
+});

Diff for: 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 =>

Diff for: 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')

Diff for: 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: (