feat: Reduce caught exceptions in prettyDom (#1321)

Co-authored-by: David Rieman <[email protected]>

Author: DavidRieman

src/__tests__/pretty-dom.js

@@ -155,7 +155,6 @@ test('prettyDOM can include all elements with a custom filter', () => {
 
 test('prettyDOM supports a COLORS environment variable', () => {
   const {container} = render('<div>Hello World!</div>')
-
   const noColors = prettyDOM(container, undefined, {highlight: false})
   const withColors = prettyDOM(container, undefined, {highlight: true})
 
@@ -167,6 +166,48 @@ test('prettyDOM supports a COLORS environment variable', () => {
   expect(prettyDOM(container)).toEqual(withColors)
 })
 
+test('prettyDOM handles a COLORS env variable of unexpected object type by colorizing for node', () => {
+  const {container} = render('<div>Hello World!</div>')
+  const noColors = prettyDOM(container, undefined, {highlight: false})
+  const withColors = prettyDOM(container, undefined, {highlight: true})
+
+  const originalNodeVersion = process.versions.node
+  process.env.COLORS = '{}'
+  delete process.versions.node
+  expect(prettyDOM(container)).toEqual(noColors)
+  process.versions.node = '1.2.3'
+  expect(prettyDOM(container)).toEqual(withColors)
+  process.versions.node = originalNodeVersion
+})
+
+test('prettyDOM handles a COLORS env variable of undefined by colorizing for node', () => {
+  const {container} = render('<div>Hello World!</div>')
+  const noColors = prettyDOM(container, undefined, {highlight: false})
+  const withColors = prettyDOM(container, undefined, {highlight: true})
+
+  const originalNodeVersion = process.versions.node
+  process.env.COLORS = undefined
+  delete process.versions.node
+  expect(prettyDOM(container)).toEqual(noColors)
+  process.versions.node = '1.2.3'
+  expect(prettyDOM(container)).toEqual(withColors)
+  process.versions.node = originalNodeVersion
+})
+
+test('prettyDOM handles a COLORS env variable of empty string by colorizing for node', () => {
+  const {container} = render('<div>Hello World!</div>')
+  const noColors = prettyDOM(container, undefined, {highlight: false})
+  const withColors = prettyDOM(container, undefined, {highlight: true})
+
+  const originalNodeVersion = process.versions.node
+  process.env.COLORS = ''
+  delete process.versions.node
+  expect(prettyDOM(container)).toEqual(noColors)
+  process.versions.node = '1.2.3'
+  expect(prettyDOM(container)).toEqual(withColors)
+  process.versions.node = originalNodeVersion
+})
+
 test('prettyDOM supports named custom elements', () => {
   window.customElements.define(
     'my-element-1',

src/pretty-dom.js

@@ -5,25 +5,20 @@ import {getDocument} from './helpers'
 import {getConfig} from './config'
 
 const shouldHighlight = () => {
-  let colors
+  // Try to safely parse env COLORS: We will default behavior if any step fails.
   try {
-    colors = JSON.parse(process?.env?.COLORS)
-  } catch (e) {
-    // If this throws, process?.env?.COLORS wasn't parsable. Since we only
-    // care about `true` or `false`, we can safely ignore the error.
+    const colors = process?.env?.COLORS
+    if (colors) {
+      const b = JSON.parse(colors)
+      if (typeof b === 'boolean') return b
+    }
+  } catch {
+    // Ignore (non-critical) - Make a defaulting choice below.
   }
 
-  if (typeof colors === 'boolean') {
-    // If `colors` is set explicitly (both `true` and `false`), use that value.
-    return colors
-  } else {
-    // If `colors` is not set, colorize if we're in node.
-    return (
-      typeof process !== 'undefined' &&
-      process.versions !== undefined &&
-      process.versions.node !== undefined
-    )
-  }
+  // In all other cases, whether COLORS was a weird type, or the attempt threw:
+  // Fall back to colorizing if we are running in node.
+  return !!process?.versions?.node
 }
 
 const {DOMCollection} = prettyFormat.plugins