From c47693e3bc7a6362c6f15f48d7e7f4cd03327532 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= <thymikee@gmail.com>
Date: Sun, 18 Nov 2018 17:11:49 +0100
Subject: [PATCH 1/5] feat: add debug to render helpers for easier console
 debugging

---
 README.md                                     |  27 +++-
 .../__snapshots__/render.test.js.snap         | 138 ++++++++++++++++++
 src/__tests__/debug.test.js                   |  10 +-
 src/__tests__/render.test.js                  |  43 +++++-
 src/debug.js                                  |  18 ++-
 src/render.js                                 |  10 ++
 6 files changed, 236 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 586658ca5..21cf69433 100644
--- a/README.md
+++ b/README.md
@@ -139,9 +139,32 @@ Unmount the in-memory tree, triggering the appropriate lifecycle events
 
 When using React context providers, like Redux Provider, you'll likely want to wrap rendered component with them. In such cases it's convenient to create your custom `render` method. [Follow this great guide on how to set this up](https://github.com/kentcdodds/react-testing-library#custom-render).
 
-### `toJSON: () => ?ReactTestRendererJSON`
+### `debug: (message?: string) => void`
 
-Get the rendered component JSON representation, e.g. for snapshot testing.
+Prints deeply rendered component passed to `render` with optional message on top. Uses [debug.deep](#debug) under the hood, but it's easier to use.
+
+```jsx
+const { debug } = render(<Component />);
+
+debug('optional message');
+```
+
+logs optional message and colored JSX:
+
+```jsx
+optional message
+
+<TouchableOpacity
+  activeOpacity={0.2}
+  onPress={[Function bound fn]}
+>
+  <Text>Press me</Text>
+</TouchableOpacity>
+```
+
+### `debug.shallow: (message?: string) => void`
+
+Prints shallowly rendered component passed to `render` with optional message on top. Uses [debug.shallow](#debug) under the hood, but it's easier to use.
 
 ## `shallow`
 
diff --git a/src/__tests__/__snapshots__/render.test.js.snap b/src/__tests__/__snapshots__/render.test.js.snap
index 09bae7c49..63b4a8c3c 100644
--- a/src/__tests__/__snapshots__/render.test.js.snap
+++ b/src/__tests__/__snapshots__/render.test.js.snap
@@ -1,5 +1,143 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`debug 1`] = `
+"<View>
+  <Text>
+    Is the banana fresh?
+  </Text>
+  <Text
+    testID=\\"bananaFresh\\"
+  >
+    not fresh
+  </Text>
+  <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>
+      Change freshness!
+    </Text>
+  </View>
+</View>"
+`;
+
+exports[`debug changing component: bananaFresh button message should now be "fresh" 1`] = `
+"<View>
+  <Text>
+    Is the banana fresh?
+  </Text>
+  <Text
+    testID=\\"bananaFresh\\"
+  >
+    fresh
+  </Text>
+  <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>
+      Change freshness!
+    </Text>
+  </View>
+</View>"
+`;
+
+exports[`debug: shallow 1`] = `
+"<View>
+  <Text>
+    Is the banana fresh?
+  </Text>
+  <Text
+    testID=\\"bananaFresh\\"
+  >
+    not fresh
+  </Text>
+  <Button
+    onPress={[Function anonymous]}
+    type=\\"primary\\"
+  >
+    Change freshness!
+  </Button>
+</View>"
+`;
+
+exports[`debug: shallow with message 1`] = `
+"my other custom message
+
+<View>
+  <Text>
+    Is the banana fresh?
+  </Text>
+  <Text
+    testID=\\"bananaFresh\\"
+  >
+    not fresh
+  </Text>
+  <Button
+    onPress={[Function anonymous]}
+    type=\\"primary\\"
+  >
+    Change freshness!
+  </Button>
+</View>"
+`;
+
+exports[`debug: with message 1`] = `
+"my custom message
+
+<View>
+  <Text>
+    Is the banana fresh?
+  </Text>
+  <Text
+    testID=\\"bananaFresh\\"
+  >
+    not fresh
+  </Text>
+  <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>
+      Change freshness!
+    </Text>
+  </View>
+</View>"
+`;
+
 exports[`toJSON 1`] = `
 <View
   accessible={true}
diff --git a/src/__tests__/debug.test.js b/src/__tests__/debug.test.js
index d887e8980..dc3ca3a0a 100644
--- a/src/__tests__/debug.test.js
+++ b/src/__tests__/debug.test.js
@@ -43,7 +43,7 @@ test('debug', () => {
 
   debug(component, 'test message');
 
-  expect(console.log).toBeCalledWith(output, 'test message');
+  expect(console.log).toBeCalledWith('test message\n\n', output);
 });
 
 test('debug.shallow', () => {
@@ -56,7 +56,8 @@ test('debug.deep', () => {
   const component = <Button onPress={jest.fn} text="Press me" />;
   debug.deep(component);
 
-  const output = console.log.mock.calls[0][0];
+  const mockCalls = console.log.mock.calls;
+  const output = mockCalls[0][0];
 
   expect(stripAnsi(output)).not.toEqual(output);
   expect(stripAnsi(output)).toMatchSnapshot();
@@ -65,7 +66,7 @@ test('debug.deep', () => {
 
   debug.deep(component, 'test message');
 
-  expect(console.log).toBeCalledWith(output, 'test message');
+  expect(console.log).toBeCalledWith('test message\n\n', output);
 });
 
 test('debug.deep async test', async () => {
@@ -80,7 +81,8 @@ test('debug.deep async test', async () => {
 
   debug.deep(toJSON());
 
-  const output = console.log.mock.calls[0][0];
+  const mockCalls = console.log.mock.calls;
+  const output = mockCalls[0][0];
 
   expect(stripAnsi(output)).toMatchSnapshot();
 });
diff --git a/src/__tests__/render.test.js b/src/__tests__/render.test.js
index 91365fffe..73cf86f31 100644
--- a/src/__tests__/render.test.js
+++ b/src/__tests__/render.test.js
@@ -2,7 +2,8 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
-import { render } from '..';
+import stripAnsi from 'strip-ansi';
+import { render, fireEvent } from '..';
 
 class Button extends React.Component<*> {
   render() {
@@ -172,3 +173,43 @@ test('toJSON', () => {
 
   expect(toJSON()).toMatchSnapshot();
 });
+
+test('debug', () => {
+  jest.spyOn(console, 'log').mockImplementation(x => x);
+
+  const { debug } = render(<Banana />);
+
+  debug();
+  debug('my custom message');
+  debug.shallow();
+  debug.shallow('my other custom message');
+
+  // eslint-disable-next-line no-console
+  const mockCalls = console.log.mock.calls;
+
+  expect(stripAnsi(mockCalls[0][0])).toMatchSnapshot();
+  expect(stripAnsi(mockCalls[1][0] + mockCalls[1][1])).toMatchSnapshot(
+    'with message'
+  );
+  expect(stripAnsi(mockCalls[2][0])).toMatchSnapshot('shallow');
+  expect(stripAnsi(mockCalls[3][0] + mockCalls[3][1])).toMatchSnapshot(
+    'shallow with message'
+  );
+});
+
+test('debug changing component', () => {
+  jest.spyOn(console, 'log').mockImplementation(x => x);
+
+  const { getByProps, debug } = render(<Banana />);
+
+  fireEvent.press(getByProps({ type: 'primary' }));
+
+  debug();
+
+  // eslint-disable-next-line no-console
+  const mockCalls = console.log.mock.calls;
+
+  expect(stripAnsi(mockCalls[4][0])).toMatchSnapshot(
+    'bananaFresh button message should now be "fresh"'
+  );
+});
diff --git a/src/debug.js b/src/debug.js
index 6aa050d49..0ac9cb714 100644
--- a/src/debug.js
+++ b/src/debug.js
@@ -14,7 +14,11 @@ function debugShallow(
 ) {
   const { output } = shallow(instance);
 
-  console.log(format(output), message || '');
+  if (message) {
+    console.log(`${message}\n\n`, format(output));
+  } else {
+    console.log(format(output));
+  }
 }
 
 /**
@@ -29,9 +33,17 @@ function debugDeep(
     // rendering ?ReactTestRendererJSON
     // $FlowFixMe
     const { toJSON } = render(instance);
-    console.log(format(toJSON()), message);
+    if (message) {
+      console.log(`${message}\n\n`, format(toJSON()));
+    } else {
+      console.log(format(toJSON()));
+    }
   } catch (e) {
-    console.log(format(instance), message);
+    if (message) {
+      console.log(`${message}\n\n`, format(instance));
+    } else {
+      console.log(format(instance));
+    }
   }
 }
 
diff --git a/src/render.js b/src/render.js
index 10830dcdd..3b77b2405 100644
--- a/src/render.js
+++ b/src/render.js
@@ -3,6 +3,7 @@ import * as React from 'react';
 import TestRenderer from 'react-test-renderer'; // eslint-disable-line import/no-extraneous-dependencies
 import { getByAPI } from './helpers/getByAPI';
 import { queryByAPI } from './helpers/queryByAPI';
+import debug from './debug';
 
 /**
  * Renders test component deeply using react-test-renderer and exposes helpers
@@ -21,5 +22,14 @@ export default function render(
     update: renderer.update,
     unmount: renderer.unmount,
     toJSON: renderer.toJSON,
+    debug: renderDebug(instance, renderer),
   };
 }
+
+function renderDebug(instance: ReactTestInstance, renderer) {
+  function renderDebugImpl(message?: string) {
+    return debug.deep(renderer.toJSON(), message);
+  }
+  renderDebugImpl.shallow = message => debug.shallow(instance, message);
+  return renderDebugImpl;
+}

From c14ea288b2d3f28a765a11b01116a70bfc6db71d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= <thymikee@gmail.com>
Date: Sun, 18 Nov 2018 17:14:57 +0100
Subject: [PATCH 2/5] bring back toJSON to docs

---
 README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/README.md b/README.md
index 21cf69433..02853eae3 100644
--- a/README.md
+++ b/README.md
@@ -166,6 +166,10 @@ optional message
 
 Prints shallowly rendered component passed to `render` with optional message on top. Uses [debug.shallow](#debug) under the hood, but it's easier to use.
 
+### `toJSON: () => ?ReactTestRendererJSON`
+
+Get the rendered component JSON representation, e.g. for snapshot testing.
+
 ## `shallow`
 
 Shallowly render given React component. Since it doesn't return helpers to query the output, it's mostly advised to used for snapshot testing (short snapshots are best for code reviewers).

From 8cc00badb89c57b191bd0dc98e0fac55466a0d5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= <thymikee@gmail.com>
Date: Sun, 18 Nov 2018 17:16:31 +0100
Subject: [PATCH 3/5] revert unnecessary change

---
 src/__tests__/debug.test.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/__tests__/debug.test.js b/src/__tests__/debug.test.js
index dc3ca3a0a..f141f5ddb 100644
--- a/src/__tests__/debug.test.js
+++ b/src/__tests__/debug.test.js
@@ -56,8 +56,7 @@ test('debug.deep', () => {
   const component = <Button onPress={jest.fn} text="Press me" />;
   debug.deep(component);
 
-  const mockCalls = console.log.mock.calls;
-  const output = mockCalls[0][0];
+  const output = console.log.mock.calls[0][0];
 
   expect(stripAnsi(output)).not.toEqual(output);
   expect(stripAnsi(output)).toMatchSnapshot();
@@ -81,8 +80,7 @@ test('debug.deep async test', async () => {
 
   debug.deep(toJSON());
 
-  const mockCalls = console.log.mock.calls;
-  const output = mockCalls[0][0];
+  const output = console.log.mock.calls[0][0];
 
   expect(stripAnsi(output)).toMatchSnapshot();
 });

From ff53688343af346d6887f838ac9549785673639b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= <thymikee@gmail.com>
Date: Sun, 18 Nov 2018 17:20:20 +0100
Subject: [PATCH 4/5] update TS

---
 typings/__tests__/index.test.tsx | 2 ++
 typings/index.d.ts               | 1 +
 2 files changed, 3 insertions(+)

diff --git a/typings/__tests__/index.test.tsx b/typings/__tests__/index.test.tsx
index 7446554d1..5e0b70147 100644
--- a/typings/__tests__/index.test.tsx
+++ b/typings/__tests__/index.test.tsx
@@ -63,6 +63,8 @@ const queryAllByTextRegExp: Array<ReactTestInstance> = tree.queryAllByText(
 const queryAllByProps: Array<ReactTestInstance> = tree.getAllByProps({
   value: 2,
 });
+const debugFn = tree.debug()
+const debugFnWithMessage = tree.debug('my message')
 
 tree.update(<View />);
 tree.unmount();
diff --git a/typings/index.d.ts b/typings/index.d.ts
index 15b2d02d4..d4c0f0f9d 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -31,6 +31,7 @@ export interface RenderAPI extends GetByAPI, QueryByAPI {
   update(nextElement: React.ReactElement<any>): void;
   unmount(nextElement?: React.ReactElement<any>): void;
   toJSON(): ReactTestRendererJSON | null;
+  debug(message?: string): void;
 }
 
 export type FireEventFunction = (

From 4e449f95fb7840c33dec181d267b68e76ebe642f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= <thymikee@gmail.com>
Date: Sun, 18 Nov 2018 17:56:58 +0100
Subject: [PATCH 5/5] remove cyclic dependency of debug <-> render

---
 src/__tests__/debug.test.js |  3 ++-
 src/debug.js                | 42 +++++++++----------------------------
 src/helpers/debugDeep.js    | 16 ++++++++++++++
 src/helpers/debugShallow.js | 20 ++++++++++++++++++
 src/helpers/format.js       | 10 +++++++++
 src/render.js               | 15 ++++++-------
 6 files changed, 66 insertions(+), 40 deletions(-)
 create mode 100644 src/helpers/debugDeep.js
 create mode 100644 src/helpers/debugShallow.js
 create mode 100644 src/helpers/format.js

diff --git a/src/__tests__/debug.test.js b/src/__tests__/debug.test.js
index f141f5ddb..45c18adb7 100644
--- a/src/__tests__/debug.test.js
+++ b/src/__tests__/debug.test.js
@@ -4,6 +4,7 @@ import React from 'react';
 import { TouchableOpacity, Text } from 'react-native';
 import stripAnsi from 'strip-ansi';
 import { debug, render, fireEvent, flushMicrotasksQueue } from '..';
+import debugShallow from '../helpers/debugShallow';
 
 function TextComponent({ text }) {
   return <Text>{text}</Text>;
@@ -47,7 +48,7 @@ test('debug', () => {
 });
 
 test('debug.shallow', () => {
-  expect(debug.shallow).toBe(debug);
+  expect(debug.shallow).toBe(debugShallow);
 });
 
 test('debug.deep', () => {
diff --git a/src/debug.js b/src/debug.js
index 0ac9cb714..0cd63a100 100644
--- a/src/debug.js
+++ b/src/debug.js
@@ -1,30 +1,15 @@
 // @flow
 /* eslint-disable no-console */
 import * as React from 'react';
-import prettyFormat, { plugins } from 'pretty-format';
-import shallow from './shallow';
 import render from './render';
-
-/**
- * Log pretty-printed shallow test component instance
- */
-function debugShallow(
-  instance: ReactTestInstance | React.Element<*>,
-  message?: any
-) {
-  const { output } = shallow(instance);
-
-  if (message) {
-    console.log(`${message}\n\n`, format(output));
-  } else {
-    console.log(format(output));
-  }
-}
+import debugShallow from './helpers/debugShallow';
+import debugDeep from './helpers/debugDeep';
+import format from './helpers/format';
 
 /**
  * Log pretty-printed deep test component instance
  */
-function debugDeep(
+function debugDeepElementOrInstance(
   instance: React.Element<*> | ?ReactTestRendererJSON,
   message?: any = ''
 ) {
@@ -39,23 +24,16 @@ function debugDeep(
       console.log(format(toJSON()));
     }
   } catch (e) {
-    if (message) {
-      console.log(`${message}\n\n`, format(instance));
-    } else {
-      console.log(format(instance));
-    }
+    // $FlowFixMe
+    debugDeep(instance);
   }
 }
 
-const format = input =>
-  prettyFormat(input, {
-    plugins: [plugins.ReactTestComponent, plugins.ReactElement],
-    highlight: true,
-  });
-
-const debug = debugShallow;
+function debug(instance: ReactTestInstance | React.Element<*>, message?: any) {
+  return debugShallow(instance, message);
+}
 
 debug.shallow = debugShallow;
-debug.deep = debugDeep;
+debug.deep = debugDeepElementOrInstance;
 
 export default debug;
diff --git a/src/helpers/debugDeep.js b/src/helpers/debugDeep.js
new file mode 100644
index 000000000..16d2e0eaf
--- /dev/null
+++ b/src/helpers/debugDeep.js
@@ -0,0 +1,16 @@
+// @flow
+import format from './format';
+
+/**
+ * Log pretty-printed deep test component instance
+ */
+export default function debugDeep(
+  instance: ?ReactTestRendererJSON,
+  message?: any = ''
+) {
+  if (message) {
+    console.log(`${message}\n\n`, format(instance));
+  } else {
+    console.log(format(instance));
+  }
+}
diff --git a/src/helpers/debugShallow.js b/src/helpers/debugShallow.js
new file mode 100644
index 000000000..1df224360
--- /dev/null
+++ b/src/helpers/debugShallow.js
@@ -0,0 +1,20 @@
+// @flow
+import * as React from 'react';
+import shallow from '../shallow';
+import format from './format';
+
+/**
+ * Log pretty-printed shallow test component instance
+ */
+export default function debugShallow(
+  instance: ReactTestInstance | React.Element<*>,
+  message?: any
+) {
+  const { output } = shallow(instance);
+
+  if (message) {
+    console.log(`${message}\n\n`, format(output));
+  } else {
+    console.log(format(output));
+  }
+}
diff --git a/src/helpers/format.js b/src/helpers/format.js
new file mode 100644
index 000000000..b295974ce
--- /dev/null
+++ b/src/helpers/format.js
@@ -0,0 +1,10 @@
+// @flow
+import prettyFormat, { plugins } from 'pretty-format';
+
+const format = (input: ?ReactTestRendererJSON) =>
+  prettyFormat(input, {
+    plugins: [plugins.ReactTestComponent, plugins.ReactElement],
+    highlight: true,
+  });
+
+export default format;
diff --git a/src/render.js b/src/render.js
index 3b77b2405..a953e90e0 100644
--- a/src/render.js
+++ b/src/render.js
@@ -3,7 +3,8 @@ import * as React from 'react';
 import TestRenderer from 'react-test-renderer'; // eslint-disable-line import/no-extraneous-dependencies
 import { getByAPI } from './helpers/getByAPI';
 import { queryByAPI } from './helpers/queryByAPI';
-import debug from './debug';
+import debugShallow from './helpers/debugShallow';
+import debugDeep from './helpers/debugDeep';
 
 /**
  * Renders test component deeply using react-test-renderer and exposes helpers
@@ -22,14 +23,14 @@ export default function render(
     update: renderer.update,
     unmount: renderer.unmount,
     toJSON: renderer.toJSON,
-    debug: renderDebug(instance, renderer),
+    debug: debug(instance, renderer),
   };
 }
 
-function renderDebug(instance: ReactTestInstance, renderer) {
-  function renderDebugImpl(message?: string) {
-    return debug.deep(renderer.toJSON(), message);
+function debug(instance: ReactTestInstance, renderer) {
+  function debugImpl(message?: string) {
+    return debugDeep(renderer.toJSON(), message);
   }
-  renderDebugImpl.shallow = message => debug.shallow(instance, message);
-  return renderDebugImpl;
+  debugImpl.shallow = message => debugShallow(instance, message);
+  return debugImpl;
 }