Use a fork of DOMElement plugin

Author: eps1lon

package.json

@@ -26,7 +26,6 @@
   "scripts": {
     "build": "kcd-scripts build  --no-ts-defs --ignore \"**/__tests__/**,**/__node_tests__/**,**/__mocks__/**\" && kcd-scripts build --no-ts-defs --bundle --no-clean",
     "lint": "kcd-scripts lint",
-    "postinstall": "patch-package",
     "setup": "npm install && npm run validate -s",
     "test": "kcd-scripts test",
     "test:debug": "node --inspect-brk ./node_modules/.bin/jest --watch --runInBand",
@@ -55,7 +54,6 @@
     "jest-watch-select-projects": "^2.0.0",
     "jsdom": "^16.4.0",
     "kcd-scripts": "^7.5.3",
-    "patch-package": "^6.4.1",
     "typescript": "^4.1.2"
   },
   "eslintConfig": {

patches/pretty-format+26.6.2.patch

@@ -0,0 +1,259 @@
+/**
+ * Source: https://github.com/facebook/jest/blob/master/packages/pretty-format/src/plugins/DOMElement.ts
+ */
+import type {Config, NewPlugin, Printer, Refs} from 'pretty-format'
+
+function escapeHTML(str: string): string {
+  return str.replace(/</g, '&lt;').replace(/>/g, '&gt;')
+}
+// Return empty string if keys is empty.
+const printProps = (
+  keys: Array<string>,
+  props: Record<string, unknown>,
+  config: Config,
+  indentation: string,
+  depth: number,
+  refs: Refs,
+  printer: Printer,
+): string => {
+  const indentationNext = indentation + config.indent
+  const colors = config.colors
+  return keys
+    .map(key => {
+      const value = props[key]
+      let printed = printer(value, config, indentationNext, depth, refs)
+
+      if (typeof value !== 'string') {
+        if (printed.indexOf('\n') !== -1) {
+          printed =
+            config.spacingOuter +
+            indentationNext +
+            printed +
+            config.spacingOuter +
+            indentation
+        }
+        printed = '{' + printed + '}'
+      }
+
+      return (
+        config.spacingInner +
+        indentation +
+        colors.prop.open +
+        key +
+        colors.prop.close +
+        '=' +
+        colors.value.open +
+        printed +
+        colors.value.close
+      )
+    })
+    .join('')
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType#node_type_constants
+const NodeTypeTextNode = 3
+
+// Return empty string if children is empty.
+const printChildren = (
+  children: Array<unknown>,
+  config: Config,
+  indentation: string,
+  depth: number,
+  refs: Refs,
+  printer: Printer,
+): string =>
+  children
+    .map(child => {
+      const printedChild =
+        typeof child === 'string'
+          ? printText(child, config)
+          : printer(child, config, indentation, depth, refs)
+
+      if (
+        printedChild === '' &&
+        typeof child === 'object' &&
+        child !== null &&
+        (child as Node).nodeType !== NodeTypeTextNode
+      ) {
+        // A plugin serialized this Node to '' meaning we should ignore it.
+        return ''
+      }
+      return config.spacingOuter + indentation + printedChild
+    })
+    .join('')
+
+const printText = (text: string, config: Config): string => {
+  const contentColor = config.colors.content
+  return contentColor.open + escapeHTML(text) + contentColor.close
+}
+
+const printComment = (comment: string, config: Config): string => {
+  const commentColor = config.colors.comment
+  return (
+    commentColor.open +
+    '<!--' +
+    escapeHTML(comment) +
+    '-->' +
+    commentColor.close
+  )
+}
+
+// Separate the functions to format props, children, and element,
+// so a plugin could override a particular function, if needed.
+// Too bad, so sad: the traditional (but unnecessary) space
+// in a self-closing tagColor requires a second test of printedProps.
+const printElement = (
+  type: string,
+  printedProps: string,
+  printedChildren: string,
+  config: Config,
+  indentation: string,
+): string => {
+  const tagColor = config.colors.tag
+  return (
+    tagColor.open +
+    '<' +
+    type +
+    (printedProps &&
+      tagColor.close +
+        printedProps +
+        config.spacingOuter +
+        indentation +
+        tagColor.open) +
+    (printedChildren
+      ? '>' +
+        tagColor.close +
+        printedChildren +
+        config.spacingOuter +
+        indentation +
+        tagColor.open +
+        '</' +
+        type
+      : (printedProps && !config.min ? '' : ' ') + '/') +
+    '>' +
+    tagColor.close
+  )
+}
+
+const printElementAsLeaf = (type: string, config: Config): string => {
+  const tagColor = config.colors.tag
+  return (
+    tagColor.open +
+    '<' +
+    type +
+    tagColor.close +
+    ' …' +
+    tagColor.open +
+    ' />' +
+    tagColor.close
+  )
+}
+
+const ELEMENT_NODE = 1
+const TEXT_NODE = 3
+const COMMENT_NODE = 8
+const FRAGMENT_NODE = 11
+
+const ELEMENT_REGEXP = /^((HTML|SVG)\w*)?Element$/
+
+const testNode = (val: any) => {
+  const constructorName = val.constructor.name
+  const {nodeType, tagName} = val
+  const isCustomElement =
+    (typeof tagName === 'string' && tagName.includes('-')) ||
+    (typeof val.hasAttribute === 'function' && val.hasAttribute('is'))
+
+  return (
+    (nodeType === ELEMENT_NODE &&
+      (ELEMENT_REGEXP.test(constructorName) || isCustomElement)) ||
+    (nodeType === TEXT_NODE && constructorName === 'Text') ||
+    (nodeType === COMMENT_NODE && constructorName === 'Comment') ||
+    (nodeType === FRAGMENT_NODE && constructorName === 'DocumentFragment')
+  )
+}
+
+export const test: NewPlugin['test'] = (val: any) =>
+  val?.constructor?.name && testNode(val)
+
+type HandledType = Element | Text | Comment | DocumentFragment
+
+function nodeIsText(node: HandledType): node is Text {
+  return node.nodeType === TEXT_NODE
+}
+
+function nodeIsComment(node: HandledType): node is Comment {
+  return node.nodeType === COMMENT_NODE
+}
+
+function nodeIsFragment(node: HandledType): node is DocumentFragment {
+  return node.nodeType === FRAGMENT_NODE
+}
+
+export default function createDOMElementFilter(
+  filterNode: (node: Node) => boolean,
+): NewPlugin {
+  return {
+    test: (val: any) => val?.constructor?.name && testNode(val),
+    serialize: (
+      node: HandledType,
+      config: Config,
+      indentation: string,
+      depth: number,
+      refs: Refs,
+      printer: Printer,
+    ) => {
+      if (nodeIsText(node)) {
+        return printText(node.data, config)
+      }
+
+      if (nodeIsComment(node)) {
+        return printComment(node.data, config)
+      }
+
+      const type = nodeIsFragment(node)
+        ? `DocumentFragment`
+        : node.tagName.toLowerCase()
+
+      if (++depth > config.maxDepth) {
+        return printElementAsLeaf(type, config)
+      }
+
+      return printElement(
+        type,
+        printProps(
+          nodeIsFragment(node)
+            ? []
+            : Array.from(node.attributes)
+                .map(attr => attr.name)
+                .sort(),
+          nodeIsFragment(node)
+            ? {}
+            : Array.from(node.attributes).reduce<Record<string, string>>(
+                (props, attribute) => {
+                  props[attribute.name] = attribute.value
+                  return props
+                },
+                {},
+              ),
+          config,
+          indentation + config.indent,
+          depth,
+          refs,
+          printer,
+        ),
+        printChildren(
+          Array.prototype.slice
+            .call(node.childNodes || node.children)
+            .filter(filterNode),
+          config,
+          indentation + config.indent,
+          depth,
+          refs,
+          printer,
+        ),
+        config,
+        indentation,
+      )
+    },
+  }
+}

src/DOMElementFilter.ts

@@ -31,8 +31,18 @@ let config: InternalConfig = {
 
   // called when getBy* queries fail. (message, container) => Error
   getElementError(message, container) {
+    const prettifiedDOM = prettyDOM(container)
     const error = new Error(
-      [message, prettyDOM(container)].filter(Boolean).join('\n\n'),
+      [
+        message,
+        prettifiedDOM.length > 0
+          ? `Ignored nodes: comments, <script />, <style />\n${prettyDOM(
+              container,
+            )}`
+          : null,
+      ]
+        .filter(Boolean)
+        .join('\n\n'),
     )
     error.name = 'TestingLibraryElementError'
     return error
@@ -41,7 +51,6 @@ let config: InternalConfig = {
   computedStyleSupportsPseudoElements: false,
 }
 
-export const DEFAULT_IGNORE_TAGS = 'script, style'
 export function runWithExpensiveErrorDiagnosticsDisabled<T>(
   callback: Callback<T>,
 ) {