prettyDOM function

String prettyDOM(
  1. Node? node, {
  2. int? maxLength,
  3. int? indent,
  4. int? maxDepth,
  5. bool? min,
  6. bool filterNode(
    1. Node
    )?,
})

Returns a readable representation of the DOM tree of the given node.

This can be helpful when debugging tests:

import 'package:react_testing_library/react_testing_library.dart' as rtl;
import 'package:test/test.dart';

main() {
  test('', () {
    final view = rtl.render(someReactVDom);
    print(rtl.prettyDOM(view.container));
  });
}

Options

prettyDOM is built atop Jest's prettyFormat function, which has many options that are only relevant when formatting JavaScript code, not HTML. Because of this, the options exposed here are a subset of the prettyFormat options.

maxLength

An optional argument to limit the size of the resulting string output, for cases when it becomes too large.

indent

The number of spaces in each level of indentation, defaulting to 2.

maxDepth

The number of nested levels to print in the DOM tree.

min

Whether to minimize added space: no indentation nor line breaks. Defaults to false.

filterNode

By default, <style />, <script /> and comment nodes are ignored. You can configure this behavior by passing a custom filterNode function that should return true for every node that you wish to include in the output.

At this time, formatting plugins and syntax highlighting are not supported.

See the JS prettyDOM docs for more details and examples.

Implementation

String prettyDOM(
  Node? node, {
  int? maxLength,
  int? indent,
  int? maxDepth,
  bool? min,
  bool Function(Node)? filterNode,
}) {
  final options = PrettyDomOptions();
  if (indent != null) options.indent = indent;
  if (maxDepth != null) options.maxDepth = maxDepth;
  if (min != null) options.min = min;
  if (filterNode != null) {
    // Convert from one arg to three args to work around typing issue in https://github.com/testing-library/dom-testing-library/issues/1360
    final jsFilterNode = (Node n, [_, __]) => filterNode(n);

    options.filterNode = allowInterop(jsFilterNode);
  }

  return _jsPrettyDOM(node, maxLength, options);
}