@@ -5,8 +5,8 @@ title: Debugging
5
5
6
6
## Automatic Logging
7
7
8
- When you use any ` get ` calls in your test cases, the current state of the
9
- ` container ` (DOM) gets printed on the console. For example:
8
+ When any ` get ` or ` find ` calls you use in your test cases fail , the current
9
+ state of the ` container ` (DOM) gets printed on the console. For example:
10
10
11
11
``` javascript
12
12
// <div>Hello world</div>
@@ -26,7 +26,7 @@ Here is the state of your container:
26
26
</div>
27
27
```
28
28
29
- Note: Since the DOM size can get really large, you can set the limit of DOM
29
+ ** Note** : Since the DOM size can get really large, you can set the limit of DOM
30
30
content to be printed via environment variable ` DEBUG_PRINT_LIMIT ` . The default
31
31
value is ` 7000 ` . You will see ` ... ` in the console, when the DOM content is
32
32
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
40
40
you'd like a solution that works for both, see
41
41
[ ` cross-env ` ] ( https://www.npmjs.com/package/cross-env ) .
42
42
43
+ ** Note** : The output of the DOM is colorized by default if your tests are
44
+ running in a node environment. However, you may sometimes want to turn off
45
+ colors, such as in cases where the output is written to a log file for
46
+ debugging purposes. You can use the environment variable ` COLORS ` to explicitly
47
+ force the colorization off or on. For example:
48
+
49
+ ```
50
+ COLORS=false npm test
51
+ ```
52
+
53
+ This works on macOS/Linux, you'll need to do something else for Windows. If
54
+ you'd like a solution that works for both, see
55
+ [ ` cross-env ` ] ( https://www.npmjs.com/package/cross-env ) .
56
+
43
57
## ` prettyDOM `
44
58
45
59
Built on top of
@@ -76,7 +90,7 @@ This function is usually used alongside `console.log` to temporarily print out
76
90
DOM trees during tests for debugging purposes:
77
91
78
92
```javascript
79
- import {prettyDOM } from ' @testing-library/dom'
93
+ import {prettyDOM } from ' @testing-library/dom'
80
94
81
95
const div = document .createElement (' div' )
82
96
div .innerHTML = ' <div><h1>Hello World</h1></div>'
0 commit comments