feat(breaking): remove legacy debug export (#328)

* Removed global `debug` functions

* Removed global `debug` from docs

* Cleanup

* Added migration section

Co-authored-by: Michał Pierzchała <thymikee@gmail.com>

Author: mdjastrzebski

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

@@ -1,7 +1,6 @@
 // @flow
 import act from './act';
 import cleanup from './cleanup';
-import debug from './debug';
 import fireEvent from './fireEvent';
 import flushMicrotasksQueue from './flushMicrotasksQueue';
 import render from './render';
@@ -11,7 +10,6 @@ import within from './within';
 
 export { act };
 export { cleanup };
-export { debug };
 export { fireEvent };
 export { flushMicrotasksQueue };
 export { render };

src/__tests__/debug.test.js

@@ -6,7 +6,6 @@ import {
   fireEvent,
   shallow,
   flushMicrotasksQueue,
-  debug,
   waitFor,
   act,
   within,
@@ -251,17 +250,6 @@ const shallowTree: { output: React.ReactElement<any> } = shallow(
 
 const waitForFlush: Promise<any> = flushMicrotasksQueue();
 
-// debug API
-debug(<TestComponent />);
-debug(<TestComponent />, 'message');
-debug(getByNameString);
-debug(getByNameString, 'message');
-debug.shallow(<TestComponent />);
-debug.shallow(<TestComponent />, 'message');
-debug.deep(<TestComponent />);
-debug.deep(<TestComponent />, 'message');
-debug.deep(tree.toJSON());
-
 const waitBy: Promise<ReactTestInstance> = waitFor<ReactTestInstance>(() =>
   tree.getByName('View')
 );

src/debug.js

@@ -234,19 +234,6 @@ export type WaitForFunction = <T = any>(
   options?: WaitForOptions
 ) => Promise<T>;
 
-export type DebugFunction = (
-  instance: ReactTestInstance | React.ReactElement<any>,
-  message?: string
-) => void;
-
-export type DebugAPI = DebugFunction & {
-  shallow: DebugFunction;
-  deep: (
-    instance: React.ReactElement<any> | ReactTestRendererJSON | null,
-    message?: string
-  ) => void;
-};
-
 export declare const render: (
   component: React.ReactElement<any>,
   options?: RenderOptions
@@ -256,7 +243,6 @@ export declare const shallow: <P = {}>(
 ) => { output: React.ReactElement<P> };
 export declare const flushMicrotasksQueue: () => Promise<any>;
 export declare const cleanup: () => void;
-export declare const debug: DebugAPI;
 export declare const fireEvent: FireEventAPI;
 export declare const waitFor: WaitForFunction;
 export declare const act: (callback: () => void) => Thenable;

src/index.js

@@ -369,63 +369,6 @@ Use cases for scoped queries include:
 - queries scoped to a single item inside a FlatList containing many items
 - queries scoped to a single screen in tests involving screen transitions (e.g. with react-navigation)
 
-## `debug`
-
-- [`Example code`](https://github.com/callstack/react-native-testing-library/blob/master/src/__tests__/debug.test.js)
-
-Log prettified shallowly rendered component or test instance (just like snapshot) to stdout.
-
-```jsx
-import { debug } from 'react-native-testing-library';
-
-debug(<Component />);
-debug.shallow(<Component />); // an alias for `debug`
-```
-
-logs:
-
-```jsx
-<TouchableOpacity
-  activeOpacity={0.2}
-  onPress={[Function bound fn]}
->
-  <TextComponent
-    text="Press me"
-  />
-</TouchableOpacity>
-```
-
-There's also `debug.deep` that renders deeply to stdout.
-
-```jsx
-import { debug } from 'react-native-testing-library';
-
-debug.deep(<Component />);
-debug.deep(toJSON(), 'actually debug JSON too'); // useful when Component state changes
-```
-
-logs:
-
-```jsx
-<View
-  accessible={true}
-  isTVSelectable={true}
-  onResponderGrant={[Function bound touchableHandleResponderGrant]}
-  // ... more props
-  style={
-    Object {
-      \\"opacity\\": 1,
-    }
-  }
->
-  <Text>
-    Press me
-  </Text>
-</View>
-```
-
-Optionally you can provide a string message as a second argument to `debug`, which will be displayed right after the component.
-
 ## `flushMicrotasksQueue`
 
 Waits for microtasks queue to flush. Useful if you want to wait for some promises with `async/await`.

typings/__tests__/index.test.tsx

@@ -35,6 +35,10 @@ Both changes should improve code readibility.
 Please note that in many cases `waitFor` call can be replaced by proper use of `findBy` asynchonous queries resulting in more streamlined test code.
 :::
 
+## Removed global `debug` function
+
+Global debug function has been removed in favor of `debug()` method returned from `render()` function.
+
 ## Some `byTestId` queries behavior changes
 
 In version `1.x` `getByTestId` and `queryByTestId` could return non-native elements in tests. This was in contrast with other query functions: `getAllByTestId`, `queryAllByTestId`, `findByTestId` and `findAllByTestId` which returned only elements that would be rendered to native components (e.g. `View`, `Text`, etc).