Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

update docs to describe usage of COLORS env variable #1148

Merged
merged 1 commit into from Sep 17, 2022
Merged

update docs to describe usage of COLORS env variable #1148

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
22 changes: 18 additions & 4 deletions docs/dom-testing-library/api-debugging.mdx
View file
Open in desktop
Expand Up @@ -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
// <div>Hello world</div>
Expand All @@ -26,7 +26,7 @@ Here is the state of your container:
</div>
```

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.
Expand All @@ -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
Expand Down Expand Up @@ -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 = '<div><h1>Hello World</h1></div>'
Expand Down