diff --git a/README.md b/README.md
index 961d2ff44..a6df746f9 100644
--- a/README.md
+++ b/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();
+debug.deep(toJSON(), 'actually debug JSON too'); // useful when Component state changes
```
logs:
diff --git a/src/__tests__/__snapshots__/debug.test.js.snap b/src/__tests__/__snapshots__/debug.test.js.snap
index 2a595cfa1..8bef21dcb 100644
--- a/src/__tests__/__snapshots__/debug.test.js.snap
+++ b/src/__tests__/__snapshots__/debug.test.js.snap
@@ -3,10 +3,10 @@
exports[`debug 1`] = `
"
"
`;
@@ -28,7 +28,29 @@ exports[`debug.deep 1`] = `
}
>
- Press me
+ Press me 0
+
+"
+`;
+
+exports[`debug.deep async test 1`] = `
+"
+
+ Press me 1
"
`;
diff --git a/src/__tests__/debug.test.js b/src/__tests__/debug.test.js
index 758280cea..d887e8980 100644
--- a/src/__tests__/debug.test.js
+++ b/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};
}
-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 (
-
-
+
+
);
}
@@ -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(
+
+ );
+
+ fireEvent.press(getByName('TouchableOpacity'));
+ await flushMicrotasksQueue();
+
+ debug.deep(toJSON());
+
+ const output = console.log.mock.calls[0][0];
+
+ expect(stripAnsi(output)).toMatchSnapshot();
+});
diff --git a/src/debug.js b/src/debug.js
index d97b66fcb..29320bf68 100644
--- a/src/debug.js
+++ b/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 --git a/typings/__tests__/index.test.tsx b/typings/__tests__/index.test.tsx
index b3532970c..7446554d1 100644
--- a/typings/__tests__/index.test.tsx
+++ b/typings/__tests__/index.test.tsx
@@ -90,6 +90,7 @@ debug.shallow();
debug.shallow(, 'message');
debug.deep();
debug.deep(, 'message');
+debug.deep(tree.toJSON());
const waitBy: Promise = waitForElement(
() => tree.getByName('View')
diff --git a/typings/index.d.ts b/typings/index.d.ts
index 1f467e1b0..15b2d02d4 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -58,7 +58,10 @@ export type DebugFunction = (
export type DebugAPI = DebugFunction & {
shallow: DebugFunction;
- deep: (instance: React.ReactElement, message?: string) => void;
+ deep: (
+ instance: React.ReactElement | ReactTestRendererJSON | null,
+ message?: string
+ ) => void;
};
export declare const render: (