Add mechanism for turning off color highlighting in all `prettyDOM` calls

MynockSpit commented 2 years ago

Describe the feature you'd like:

A mechanism for turning off color highlighting in all prettyDOM calls.

When tests are being run in environments that don't respect colors, the output of prettyDOM is very challenging to read.

Example:

            [36m<div[39m
              [33mclass[39m=[32m"bp3-button-group bp3-minimal"[39m
            [36m>[39m
              [36m<button[39m
                [33maria-label[39m=[32m"Close"[39m
                [33mclass[39m=[32m"bp3-button"[39m
                [33mtype[39m=[32m"button"[39m
              [36m>[39m
                [36m<span[39m
                  [33maria-hidden[39m=[32m"true"[39m
                  [33mclass[39m=[32m"bp3-icon bp3-icon-cross"[39m
                  [33micon[39m=[32m"cross"[39m
                  [33mtabindex[39m=[32m"0"[39m
                [36m>[39m
                  [36m<svg[39m
                    [33mdata-icon[39m=[32m"cross"[39m
                    [33mheight[39m=[32m"16"[39m
                    [33mviewBox[39m=[32m"0 0 16 16"[39m
                    [33mwidth[39m=[32m"16"[39m
                  [36m>[39m
                    [36m<path[39m
                      [33md[39m=[32m"M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"[39m
                      [33mfill-rule[39m=[32m"evenodd"[39m
                    [36m/>[39m
                  [36m</svg>[39m
                [36m</span>[39m
              [36m</button>[39m
            [36m</div>[39m
          [36m</div>[39m

Right now, there's an automatic switch based on if you're running in node or not, however, some environments run in node, then output their logs to a format that keeps the escape characters, but doesn't parse them.

Suggested implementation:

Since testing-lilbrary doesn't have a direct command line interface, options are limited. There is some precedence for using an environment variable as is there for a global configuration.

Either would work, but the ideal would be to solve this problem once and move on. As a result, I'd suggest exposing configuration for pretty-format globally. This has two major downsides: it adds complexity (e.g. how do we merge configs?) and it ties us more strongly to pretty-format.

In this example, I create a custom DEBUG_HIGHLIGHTING environment variable, and use it to configure prettyFormat.

import {configure} from '@testing-library/dom'

configure({
  prettyFormat: {
    highlight: process.env.DEBUG_HIGHLIGHTING !== "false" ? true : false
  }
})

DEBUG_HIGHLIGHTING=false npm run test

Describe alternatives you've considered:

Unfortunately, so far as I am aware, there is no alternative w/o some code change. Wrapping prettyDOM in your own wrapper that reads an environment variable isn't viable b/c test failures will not use your wrapped prettyDOM, making it a half solution at best.

That said, here are two other alternatives to global options configuration:

Environment variable

This would behave much like DEBUG_PRINT_LIMIT does today, in that it would only really have a use in command-line invocations. (Yes, you can use this in the browser, but would have to fake process.env first.) However, it would be quite easy to use on the command line:

DEBUG_HIGHLIGHTING=false npm run test

Configure property

Instead of configuring the entire prettyFormat config, just expose highlighting. It's simpler and doesn't tie us to pretty-format, but means we may revisit this topic when someone wants to globally customize anything else.

In this example, I name the property colors to show that we could theoretically stay away from the language used by pretty-format.

import {configure} from '@testing-library/dom'

configure({
  colors: process.env.DEBUG_HIGHLIGHTING !== "false" ? true : false
})

DEBUG_HIGHLIGHTING=false npm run test

eps1lon commented 2 years ago

I'm all for it 👍🏻

Note that access to process.env.* still needs to be guarded since it's not defined in browsers.

I would prefer using just COLORS=false. That leaves us room to add more levels later on.

eps1lon commented 1 year ago

:tada: This fix is included in version 8.18.0 :tada:

The release is available on:

testing-library / dom-testing-library