diff --git a/src/__tests__/debug.js b/src/__tests__/debug.js index 231154d..fca9299 100644 --- a/src/__tests__/debug.js +++ b/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( + + Hello World! + , + { + options: { + debug: { + omitProps: ['style', 'pointerEvents', 'collapsable'], + }, + }, + }, + ); + + debug(); + + expect(console.log).toHaveBeenCalledTimes(1); + expect(log).toMatchInlineSnapshot(` + " +  +  +  + Hello World! +  +  +  + " + `); +}); diff --git a/src/index.js b/src/index.js index 32f1a04..6f7ac4e 100644 --- a/src/index.js +++ b/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 ? ( @@ -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(() => { diff --git a/src/lib/__tests__/pretty-print.js b/src/lib/__tests__/pretty-print.js index 886ca53..d6d57b4 100644 --- a/src/lib/__tests__/pretty-print.js +++ b/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( + + Hello World! + , + ); + + expect(prettyPrint(container, undefined, { debug: { omitProps: ['style', 'pointerEvents'] } })) + .toMatchInlineSnapshot(` + " +  +  + Hello World! +  +  + " + `); +}); diff --git a/src/lib/pretty-print.js b/src/lib/pretty-print.js index 8ef5076..1b36c8a 100644 --- a/src/lib/pretty-print.js +++ b/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 diff --git a/src/lib/to-json.js b/src/lib/to-json.js index 13c55f4..deae803 100644 --- a/src/lib/to-json.js +++ b/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]; } }); diff --git a/typings/pretty-print.d.ts b/typings/pretty-print.d.ts index 82405cb..1210deb 100644 --- a/typings/pretty-print.d.ts +++ b/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;