[v13] chore: remove debug shallow (#1601)

src/__tests__/__snapshots__/render-debug.test.tsx.snap

@@ -367,106 +367,6 @@ exports[`debug: another custom message 1`] = `
 </View>"
 `;
 
-exports[`debug: shallow 1`] = `
-"<View>
-  <Text>
-    Is the banana fresh?
-  </Text>
-  <Text
-    testID="bananaFresh"
-  >
-    not fresh
-  </Text>
-  <TextInput
-    placeholder="Add custom freshness"
-    testID="bananaCustomFreshness"
-    value="Custom Freshie"
-  />
-  <TextInput
-    defaultValue="What did you inspect?"
-    placeholder="Who inspected freshness?"
-    testID="bananaChef"
-    value="I inspected freshie"
-  />
-  <TextInput
-    defaultValue="What banana?"
-  />
-  <TextInput
-    defaultValue="hello"
-    value=""
-  />
-  <MyButton
-    onPress={[Function changeFresh]}
-  >
-    Change freshness!
-  </MyButton>
-  <Text
-    testID="duplicateText"
-  >
-    First Text
-  </Text>
-  <Text
-    testID="duplicateText"
-  >
-    Second Text
-  </Text>
-  <Text>
-    0
-  </Text>
-</View>"
-`;
-
-exports[`debug: shallow with message 1`] = `
-"my other custom message
-
-<View>
-  <Text>
-    Is the banana fresh?
-  </Text>
-  <Text
-    testID="bananaFresh"
-  >
-    not fresh
-  </Text>
-  <TextInput
-    placeholder="Add custom freshness"
-    testID="bananaCustomFreshness"
-    value="Custom Freshie"
-  />
-  <TextInput
-    defaultValue="What did you inspect?"
-    placeholder="Who inspected freshness?"
-    testID="bananaChef"
-    value="I inspected freshie"
-  />
-  <TextInput
-    defaultValue="What banana?"
-  />
-  <TextInput
-    defaultValue="hello"
-    value=""
-  />
-  <MyButton
-    onPress={[Function changeFresh]}
-  >
-    Change freshness!
-  </MyButton>
-  <Text
-    testID="duplicateText"
-  >
-    First Text
-  </Text>
-  <Text
-    testID="duplicateText"
-  >
-    Second Text
-  </Text>
-  <Text>
-    0
-  </Text>
-</View>"
-`;
-
 exports[`debug: with message 1`] = `
 "my custom message
 

src/__tests__/render-debug.test.tsx

@@ -97,21 +97,19 @@ test('debug', () => {
 
   screen.debug();
   screen.debug('my custom message');
-  screen.debug.shallow();
-  screen.debug.shallow('my other custom message');
   screen.debug({ message: 'another custom message' });
 
   const mockCalls = jest.mocked(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');
-  expect(stripAnsi(mockCalls[4][0] + mockCalls[4][1])).toMatchSnapshot('another custom message');
+  expect(stripAnsi(mockCalls[2][0] + mockCalls[2][1])).toMatchSnapshot('another custom message');
 
   const mockWarnCalls = jest.mocked(console.warn).mock.calls;
-  expect(mockWarnCalls[0]).toEqual([
-    'Using debug("message") is deprecated and will be removed in future release, please use debug({ message; "message" }) instead.',
-  ]);
+  expect(mockWarnCalls[0]).toMatchInlineSnapshot(`
+    [
+      "Using debug("message") is deprecated and will be removed in future release, please use debug({ message: "message" }) instead.",
+    ]
+  `);
 });
 
 test('debug changing component', () => {

src/__tests__/screen.test.tsx

@@ -55,6 +55,5 @@ test('screen throws without render', () => {
   expect(() => screen.root).toThrow('`render` method has not been called');
   expect(() => screen.UNSAFE_root).toThrow('`render` method has not been called');
   expect(() => screen.debug()).toThrow('`render` method has not been called');
-  expect(() => screen.debug.shallow()).toThrow('`render` method has not been called');
   expect(() => screen.getByText('Mt. Everest')).toThrow('`render` method has not been called');
 });

src/config.ts

@@ -1,4 +1,4 @@
-import { DebugOptions } from './helpers/debug-deep';
+import { DebugOptions } from './helpers/debug';
 
 /**
  * Global configuration options for React Native Testing Library.

src/helpers/debug-shallow.ts

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import type { ReactTestInstance } from 'react-test-renderer';
-import { shallowInternal } from '../shallow';
-import format from './format';
-
-/**
- * Log pretty-printed shallow test component instance
- */
-export default function debugShallow(
-  instance: ReactTestInstance | React.ReactElement<any>,
-  message?: string,
-) {
-  const { output } = shallowInternal(instance);
-
-  if (message) {
-    // eslint-disable-next-line no-console
-    console.log(`${message}\n\n`, format(output));
-  } else {
-    // eslint-disable-next-line no-console
-    console.log(format(output));
-  }
-}

src/helpers/debug.ts

@@ -8,7 +8,7 @@ export type DebugOptions = {
 /**
  * Log pretty-printed deep test component instance
  */
-export default function debugDeep(
+export function debug(
   instance: ReactTestRendererJSON | ReactTestRendererJSON[],
   options?: DebugOptions | string,
 ) {

src/render.tsx

@@ -5,8 +5,7 @@ import act from './act';
 import { addToCleanupQueue } from './cleanup';
 import { getConfig } from './config';
 import { getHostChildren } from './helpers/component-tree';
-import debugDeep, { DebugOptions } from './helpers/debug-deep';
-import debugShallow from './helpers/debug-shallow';
+import { debug, DebugOptions } from './helpers/debug';
 import { configureHostComponentNamesIfNeeded } from './helpers/host-component-names';
 import { validateStringsRenderedWithinText } from './helpers/string-validation';
 import { renderWithAct } from './render-act';
@@ -105,7 +104,7 @@ function buildRenderResult(
     unmount,
     rerender: update, // alias for `update`
     toJSON: renderer.toJSON,
-    debug: debug(instance, renderer),
+    debug: makeDebug(instance, renderer),
     get root(): ReactTestInstance {
       return getHostChildren(instance)[0];
     },
@@ -139,12 +138,9 @@ function updateWithAct(
   };
 }
 
-export interface DebugFunction {
-  (options?: DebugOptions | string): void;
-  shallow: (message?: string) => void;
-}
+export type DebugFunction = (options?: DebugOptions | string) => void;
 
-function debug(instance: ReactTestInstance, renderer: ReactTestRenderer): DebugFunction {
+function makeDebug(instance: ReactTestInstance, renderer: ReactTestRenderer): DebugFunction {
   function debugImpl(options?: DebugOptions | string) {
     const { defaultDebugOptions } = getConfig();
     const debugOptions =
@@ -155,15 +151,14 @@ function debug(instance: ReactTestInstance, renderer: ReactTestRenderer): DebugF
     if (typeof options === 'string') {
       // eslint-disable-next-line no-console
       console.warn(
-        'Using debug("message") is deprecated and will be removed in future release, please use debug({ message; "message" }) instead.',
+        'Using debug("message") is deprecated and will be removed in future release, please use debug({ message: "message" }) instead.',
       );
     }
 
     const json = renderer.toJSON();
     if (json) {
-      return debugDeep(json, debugOptions);
+      return debug(json, debugOptions);
     }
   }
-  debugImpl.shallow = (message?: string) => debugShallow(instance, message);
   return debugImpl;
 }

src/screen.ts

@@ -10,7 +10,6 @@ const notImplemented = () => {
 const notImplementedDebug = () => {
   throw new Error(SCREEN_ERROR);
 };
-notImplementedDebug.shallow = notImplemented;
 
 interface Screen extends RenderResult {
   isDetached?: boolean;

src/shallow.ts

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { ReactTestInstance } from 'react-test-renderer';
-import ShallowRenderer from 'react-test-renderer/shallow'; // eslint-disable-line import/no-extraneous-dependencies
-
-/**
- * Renders test component shallowly using react-test-renderer/shallow
- */
-export function shallowInternal(instance: ReactTestInstance | React.ReactElement<any>): {
-  output: any;
-} {
-  const renderer = new (ShallowRenderer as any)();
-
-  renderer.render(React.createElement(instance.type, instance.props));
-
-  return {
-    output: renderer.getRenderOutput(),
-  };
-}

typings/index.flow.js

@@ -276,7 +276,6 @@ type DebugOptions = {
 
 type Debug = {
   (options?: DebugOptions | string): void,
-  shallow: (message?: string) => void,
 };
 
 type Queries = ByTextQueries &

website/docs/MigrationV13.md

@@ -1,5 +1,3 @@
-## @@ -0,0 +1,20 @@
-
 id: migration-v13
 title: Migration to 13.0
 
@@ -62,6 +60,10 @@ const view = screen.getBy*(...); // Find the element using any query: *ByRole, *
 expect(view).toHaveAccessibilityValue({ now: 50, min: 0, max: 50 }); // Assert its accessibility value
 ```
 
+## Removed `debug.shallow`
+
+For a time being we didn't support shallow rendering. Now we are removing the last remains of it: `debug.shallow()`. If you are interested in shallow rendering see [here](migration-v2#removed-global-shallow-function).
+
 # Other changes
 
 ## Updated `flushMicroTasks` internal method