|
| 1 | +import type { ReactTestInstance, ReactTestRendererJSON } from 'react-test-renderer'; |
| 2 | +import type { NewPlugin } from 'pretty-format'; |
| 3 | +import prettyFormat, { plugins } from 'pretty-format'; |
| 4 | +import type { MapPropsFunction } from './map-props'; |
| 5 | +import { defaultMapProps } from './map-props'; |
| 6 | + |
| 7 | +export type FormatElementOptions = { |
| 8 | + /** Minimize used space. */ |
| 9 | + compact?: boolean; |
| 10 | + |
| 11 | + /** Highlight the output. */ |
| 12 | + highlight?: boolean; |
| 13 | + |
| 14 | + /** Filter or map props to display. */ |
| 15 | + mapProps?: MapPropsFunction | null; |
| 16 | +}; |
| 17 | + |
| 18 | +/*** |
| 19 | + * Format given element as a pretty-printed string. |
| 20 | + * |
| 21 | + * @param element Element to format. |
| 22 | + */ |
| 23 | +export function formatElement( |
| 24 | + element: ReactTestInstance | null, |
| 25 | + { compact, highlight = true, mapProps = defaultMapProps }: FormatElementOptions = {}, |
| 26 | +) { |
| 27 | + if (element == null) { |
| 28 | + return '(null)'; |
| 29 | + } |
| 30 | + |
| 31 | + const { children, ...props } = element.props; |
| 32 | + const childrenToDisplay = typeof children === 'string' ? [children] : undefined; |
| 33 | + |
| 34 | + return prettyFormat( |
| 35 | + { |
| 36 | + // This prop is needed persuade the prettyFormat that the element is |
| 37 | + // a ReactTestRendererJSON instance, so it is formatted as JSX. |
| 38 | + $$typeof: Symbol.for('react.test.json'), |
| 39 | + type: `${element.type}`, |
| 40 | + props: mapProps ? mapProps(props) : props, |
| 41 | + children: childrenToDisplay, |
| 42 | + }, |
| 43 | + // See: https://www.npmjs.com/package/pretty-format#usage-with-options |
| 44 | + { |
| 45 | + plugins: [plugins.ReactTestComponent, plugins.ReactElement], |
| 46 | + printFunctionName: false, |
| 47 | + printBasicPrototype: false, |
| 48 | + highlight: highlight, |
| 49 | + min: compact, |
| 50 | + }, |
| 51 | + ); |
| 52 | +} |
| 53 | + |
| 54 | +export function formatElementList(elements: ReactTestInstance[], options?: FormatElementOptions) { |
| 55 | + if (elements.length === 0) { |
| 56 | + return '(no elements)'; |
| 57 | + } |
| 58 | + |
| 59 | + return elements.map((element) => formatElement(element, options)).join('\n'); |
| 60 | +} |
| 61 | + |
| 62 | +export function formatJson( |
| 63 | + json: ReactTestRendererJSON | ReactTestRendererJSON[], |
| 64 | + { compact, highlight = true, mapProps = defaultMapProps }: FormatElementOptions = {}, |
| 65 | +) { |
| 66 | + return prettyFormat(json, { |
| 67 | + plugins: [getElementJsonPlugin(mapProps), plugins.ReactElement], |
| 68 | + highlight: highlight, |
| 69 | + printBasicPrototype: false, |
| 70 | + min: compact, |
| 71 | + }); |
| 72 | +} |
| 73 | + |
| 74 | +function getElementJsonPlugin(mapProps?: MapPropsFunction | null): NewPlugin { |
| 75 | + return { |
| 76 | + test: (val) => plugins.ReactTestComponent.test(val), |
| 77 | + serialize: (val, config, indentation, depth, refs, printer) => { |
| 78 | + let newVal = val; |
| 79 | + if (mapProps && val.props) { |
| 80 | + newVal = { ...val, props: mapProps(val.props) }; |
| 81 | + } |
| 82 | + return plugins.ReactTestComponent.serialize( |
| 83 | + newVal, |
| 84 | + config, |
| 85 | + indentation, |
| 86 | + depth, |
| 87 | + refs, |
| 88 | + printer, |
| 89 | + ); |
| 90 | + }, |
| 91 | + }; |
| 92 | +} |
0 commit comments