From 2bd3866ba061a9ae3fc7b83a9c2ce3a90edd17e6 Mon Sep 17 00:00:00 2001 From: Than Hutchins Date: Sun, 11 Sep 2022 12:14:53 -0700 Subject: [PATCH] update docs to describe usage of COLORS env variable #1166 --- docs/dom-testing-library/api-debugging.mdx | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/docs/dom-testing-library/api-debugging.mdx b/docs/dom-testing-library/api-debugging.mdx index 1b83f5af..51aa6b7d 100644 --- a/docs/dom-testing-library/api-debugging.mdx +++ b/docs/dom-testing-library/api-debugging.mdx @@ -5,8 +5,8 @@ title: Debugging ## Automatic Logging -When you use any `get` calls in your test cases, the current state of the -`container` (DOM) gets printed on the console. For example: +When any `get` or `find` calls you use in your test cases fail, the current +state of the `container` (DOM) gets printed on the console. For example: ```javascript //
Hello world
@@ -26,7 +26,7 @@ Here is the state of your container: ``` -Note: Since the DOM size can get really large, you can set the limit of DOM +**Note**: Since the DOM size can get really large, you can set the limit of DOM content to be printed via environment variable `DEBUG_PRINT_LIMIT`. The default value is `7000`. You will see `...` in the console, when the DOM content is stripped off, because of the length you have set or due to default size limit. @@ -40,6 +40,20 @@ This works on macOS/Linux, you'll need to do something else for Windows. If you'd like a solution that works for both, see [`cross-env`](https://www.npmjs.com/package/cross-env). +**Note**: The output of the DOM is colorized by default if your tests are +running in a node environment. However, you may sometimes want to turn off +colors, such as in cases where the output is written to a log file for +debugging purposes. You can use the environment variable `COLORS` to explicitly +force the colorization off or on. For example: + +``` +COLORS=false npm test +``` + +This works on macOS/Linux, you'll need to do something else for Windows. If +you'd like a solution that works for both, see +[`cross-env`](https://www.npmjs.com/package/cross-env). + ## `prettyDOM` Built on top of @@ -76,7 +90,7 @@ This function is usually used alongside `console.log` to temporarily print out DOM trees during tests for debugging purposes: ```javascript -import {prettyDOM } from '@testing-library/dom' +import {prettyDOM} from '@testing-library/dom' const div = document.createElement('div') div.innerHTML = '

Hello World

'