feat: formatting options for render() to remove options from debug() (#70)

* feat: formatting options for render() to remove options from debug output

* update name -- propsToRemove to just removeProps

* omitProps: remove prettyPrint plugin in favour of removing props in toJSON() call

* update options in render() to destructure debug config

Author: ajsmth

src/__tests__/debug.js

@@ -1,14 +1,17 @@
 import React from 'react';
-import { Text } from 'react-native';
+import { Text, View } from 'react-native';
 
 import { cleanup, render } from '../';
 
+let log;
+
 beforeEach(() => {
-  jest.spyOn(console, 'log').mockImplementation(() => {});
+  jest.spyOn(console, 'log').mockImplementation(output => (log = output));
 });
 
 afterEach(() => {
   cleanup();
+  log = undefined;
   console.log.mockRestore();
 });
 
@@ -19,3 +22,33 @@ test('debug pretty prints the baseElement', () => {
   expect(console.log).toHaveBeenCalledTimes(1);
   expect(console.log).toHaveBeenCalledWith(expect.stringContaining('Hello World'));
 });
+
+test('debug can remove specified props from output', () => {
+  const { debug } = render(
+    <View style={{ width: 300 }}>
+      <Text>Hello World!</Text>
+    </View>,
+    {
+      options: {
+        debug: {
+          omitProps: ['style', 'pointerEvents', 'collapsable'],
+        },
+      },
+    },
+  );
+
+  debug();
+
+  expect(console.log).toHaveBeenCalledTimes(1);
+  expect(log).toMatchInlineSnapshot(`
+    "<View>
+      <View>
+        <View>
+          <Text>
+            Hello World!
+          </Text>
+        </View>
+      </View>
+    </View>"
+  `);
+});

src/index.js

@@ -15,6 +15,8 @@ import act from './act-compat';
 const renderers = new Set();
 
 function render(ui, { options = {}, wrapper: WrapperComponent, queries } = {}) {
+  const { debug, ...rest } = options;
+
   const wrapUiIfNeeded = innerElement =>
     WrapperComponent ? (
       <AppContainer>
@@ -27,7 +29,7 @@ function render(ui, { options = {}, wrapper: WrapperComponent, queries } = {}) {
   let testRenderer;
 
   act(() => {
-    testRenderer = TR.create(wrapUiIfNeeded(ui), options);
+    testRenderer = TR.create(wrapUiIfNeeded(ui), rest);
   });
 
   renderers.add(testRenderer);
@@ -39,7 +41,7 @@ function render(ui, { options = {}, wrapper: WrapperComponent, queries } = {}) {
   return {
     baseElement,
     container,
-    debug: (el = baseElement) => console.log(prettyPrint(el)),
+    debug: (el = baseElement) => console.log(prettyPrint(el, undefined, { debug })),
     unmount: () => testRenderer.unmount(),
     rerender: rerenderUi => {
       act(() => {

src/lib/__tests__/pretty-print.js

@@ -88,3 +88,24 @@ test('it supports truncating the output length', () => {
 
   expect(prettyPrint(container, 5)).toMatch(/\.\.\./);
 });
+
+test('it supports removing props from output', () => {
+  const { container } = render(
+    <View style={{ width: 100 }}>
+      <Text>Hello World!</Text>
+    </View>,
+  );
+
+  expect(prettyPrint(container, undefined, { debug: { omitProps: ['style', 'pointerEvents'] } }))
+    .toMatchInlineSnapshot(`
+    "<View
+      collapsable={true}
+    >
+      <View>
+        <Text>
+          Hello World!
+        </Text>
+      </View>
+    </View>"
+  `);
+});

src/lib/pretty-print.js

@@ -5,12 +5,15 @@ import { toJSON } from './to-json';
 
 const { ReactTestComponent, ReactElement } = prettyFormat.plugins;
 
-function prettyPrint(element, maxLength, options) {
-  const debugContent = prettyFormat(toJSON(element), {
-    plugins: [ReactTestComponent, ReactElement],
+function prettyPrint(element, maxLength, options = {}) {
+  let plugins = [ReactTestComponent, ReactElement];
+  const { debug, ...rest } = options;
+
+  const debugContent = prettyFormat(toJSON(element, debug), {
+    plugins: plugins,
     printFunctionName: false,
     highlight: true,
-    ...options,
+    ...rest,
   });
 
   return maxLength !== undefined && debugContent && debugContent.toString().length > maxLength

src/lib/to-json.js

@@ -1,12 +1,12 @@
-function toJSON({ _fiber: { stateNode = null } = {} } = {}) {
+function toJSON({ _fiber: { stateNode = null } = {} } = {}, options = {}) {
   if (!stateNode) return null;
   if (stateNode.rootContainerInstance && stateNode.rootContainerInstance.children.length === 0)
     return null;
 
-  return _toJSON(stateNode);
+  return _toJSON(stateNode, options);
 }
 
-function _toJSON(inst) {
+function _toJSON(inst, { omitProps = [] }) {
   if (inst.isHidden) {
     // Omit timed out children from output entirely. This seems like the least
     // surprising behavior. We could perhaps add a separate API that includes
@@ -23,12 +23,13 @@ function _toJSON(inst) {
       const { children, ...props } = inst.props;
 
       // Convert all children to the JSON format
-      const renderedChildren = inst.children.map(child => _toJSON(child));
+      const renderedChildren = inst.children.map(child => _toJSON(child, { omitProps }));
 
       // Function props get noisy in debug output, so we'll exclude them
+      // Also exclude any props configured via options.omitProps
       let renderedProps = {};
       Object.keys(props).filter(name => {
-        if (typeof props[name] !== 'function') {
+        if (typeof props[name] !== 'function' && !omitProps.includes(name)) {
           renderedProps[name] = props[name];
         }
       });

typings/pretty-print.d.ts

@@ -3,4 +3,9 @@ import { NativeTestInstance } from './query-helpers';
 export function prettyPrint(
   element: NativeTestInstance | string,
   maxLength?: number,
+  options?: {
+    debug: {
+      omitProps: string[];
+    };
+  },
 ): string | false;