0
# Built-in Plugins
1

2
Comprehensive collection of plugins for common JavaScript frameworks and data structures including React elements, DOM nodes, Immutable.js collections, and Jest testing utilities.
3

4
## Capabilities
5

6
### Plugins Export
7

8
All built-in plugins are available through the `plugins` named export.
9

10
```typescript { .api }
11
const plugins: {
12
  AsymmetricMatcher: Plugin;
13
  DOMCollection: Plugin;
14
  DOMElement: Plugin;
15
  Immutable: Plugin;
16
  ReactElement: Plugin;
17
  ReactTestComponent: Plugin;
18
};
19
```
20

21
**Usage Examples:**
22

23
```typescript
24
import { format, plugins } from "pretty-format";
25

26
// Use specific plugins
27
const { ReactElement, DOMElement } = plugins;
28

29
const formatted = format(reactComponent, {
30
  plugins: [ReactElement]
31
});
32

33
// Use multiple plugins
34
const formatted2 = format(domNode, {
35
  plugins: [DOMElement, ReactElement]
36
});
37
```
38

39
### AsymmetricMatcher Plugin
40

41
Handles Jest asymmetric matchers like `expect.any()`, `expect.objectContaining()`, etc.
42

43
```typescript { .api }
44
const AsymmetricMatcher: Plugin;
45
```
46

47
**Supported Matchers:**
48
- `expect.any(Constructor)`
49
- `expect.anything()`
50
- `expect.arrayContaining(array)`
51
- `expect.objectContaining(object)`
52
- `expect.stringContaining(string)`
53
- `expect.stringMatching(pattern)`
54

55
**Usage Examples:**
56

57
```typescript
58
import { format, plugins } from "pretty-format";
59
const { AsymmetricMatcher } = plugins;
60

61
// Format asymmetric matchers
62
const matcher = expect.objectContaining({
63
  name: expect.any(String),
64
  age: expect.any(Number)
65
});
66

67
const formatted = format(matcher, {
68
  plugins: [AsymmetricMatcher]
69
});
70
// Result: ObjectContaining {
71
//   "name": Any<String>,
72
//   "age": Any<Number>,
73
// }
74
```
75

76
### DOMCollection Plugin
77

78
Handles DOM collections like `NodeList`, `HTMLCollection`, and other array-like DOM objects.
79

80
```typescript { .api }
81
const DOMCollection: Plugin;
82
```
83

84
**Supported Collections:**
85
- `NodeList`
86
- `HTMLCollection`  
87
- `DOMTokenList`
88
- `CSSStyleDeclaration`
89
- Other DOM array-like objects
90

91
**Usage Examples:**
92

93
```typescript
94
import { format, plugins } from "pretty-format";
95
const { DOMCollection } = plugins;
96

97
// Format DOM collections
98
const nodeList = document.querySelectorAll('div');
99
const htmlCollection = document.getElementsByClassName('item');
100

101
const formatted = format(nodeList, {
102
  plugins: [DOMCollection]
103
});
104
// Result: NodeList [
105
//   <div />,
106
//   <div />,
107
// ]
108
```
109

110
### DOMElement Plugin
111

112
Handles DOM elements and nodes with HTML-like formatting.
113

114
```typescript { .api }
115
const DOMElement: Plugin;
116
```
117

118
**Supported Node Types:**
119
- **Element nodes** (nodeType 1): `<div>`, `<span>`, etc.
120
- **Text nodes** (nodeType 3): Text content
121
- **Comment nodes** (nodeType 8): `<!-- comment -->`
122
- **Document fragment** (nodeType 11): Fragment containers
123
- **Custom elements**: Elements with hyphens or `is` attribute
124

125
**Usage Examples:**
126

127
```typescript
128
import { format, plugins } from "pretty-format";
129
const { DOMElement } = plugins;
130

131
// Format DOM elements
132
const element = document.createElement('div');
133
element.className = 'container';
134
element.setAttribute('data-id', '123');
135
element.textContent = 'Hello World';
136

137
const formatted = format(element, {
138
  plugins: [DOMElement]
139
});
140
// Result: <div
141
//   class="container"
142
//   data-id="123"
143
// >
144
//   Hello World
145
// </div>
146

147
// Self-closing elements
148
const input = document.createElement('input');
149
input.type = 'text';
150
input.value = 'test';
151

152
const inputFormatted = format(input, {
153
  plugins: [DOMElement]
154
});
155
// Result: <input
156
//   type="text"
157
//   value="test"
158
// />
159
```
160

161
### Immutable Plugin
162

163
Handles Immutable.js data structures with native-like formatting.
164

165
```typescript { .api }
166
const Immutable: Plugin;
167
```
168

169
**Supported Immutable Types:**
170
- `List`: Immutable arrays
171
- `Map`: Immutable objects
172
- `OrderedMap`: Ordered key-value pairs
173
- `Set`: Immutable sets
174
- `OrderedSet`: Ordered unique values
175
- `Stack`: LIFO collection
176
- `Seq`: Lazy sequences
177

178
**Usage Examples:**
179

180
```typescript
181
import { format, plugins } from "pretty-format";
182
import { List, Map, Set } from "immutable";
183
const { Immutable } = plugins;
184

185
// Format Immutable List
186
const list = List([1, 2, 3]);
187
const formatted = format(list, {
188
  plugins: [Immutable]
189
});
190
// Result: Immutable.List [
191
//   1,
192
//   2,
193
//   3,
194
// ]
195

196
// Format Immutable Map
197
const map = Map({ name: 'John', age: 30 });
198
const mapFormatted = format(map, {
199
  plugins: [Immutable]
200
});
201
// Result: Immutable.Map {
202
//   "name": "John",
203
//   "age": 30,
204
// }
205

206
// Format nested Immutable structures
207
const nested = Map({
208
  users: List([
209
    Map({ name: 'Alice', active: true }),
210
    Map({ name: 'Bob', active: false })
211
  ])
212
});
213
```
214

215
### ReactElement Plugin
216

217
Handles React elements with JSX-like formatting.
218

219
```typescript { .api }
220
const ReactElement: Plugin;
221
```
222

223
**Supported React Types:**
224
- **Class components**: `<MyComponent />`
225
- **Function components**: `<MyFunction />`
226
- **DOM elements**: `<div>`, `<span>`, etc.
227
- **React.Fragment**: `<React.Fragment>`
228
- **React.Suspense**: `<React.Suspense>`
229
- **Context providers/consumers**: `<Context.Provider>`, `<Context.Consumer>`
230
- **Nested elements**: Components with children
231

232
**Usage Examples:**
233

234
```typescript
235
import React from "react";
236
import { format, plugins } from "pretty-format";
237
const { ReactElement } = plugins;
238

239
// Format React elements
240
const element = React.createElement('div', 
241
  { className: 'container', id: 'main' },
242
  'Hello ',
243
  React.createElement('span', { style: { color: 'red' } }, 'World')
244
);
245

246
const formatted = format(element, {
247
  plugins: [ReactElement],
248
  printFunctionName: false
249
});
250
// Result: <div
251
//   className="container"
252
//   id="main"
253
// >
254
//   Hello 
255
//   <span
256
//     style={
257
//       Object {
258
//         "color": "red",
259
//       }
260
//     }
261
//   >
262
//     World
263
//   </span>
264
// </div>
265

266
// Function components
267
function MyComponent({ name }) {
268
  return React.createElement('h1', null, `Hello ${name}`);
269
}
270

271
const component = React.createElement(MyComponent, { name: 'Alice' });
272
const componentFormatted = format(component, {
273
  plugins: [ReactElement]
274
});
275
// Result: <MyComponent
276
//   name="Alice"
277
// />
278
```
279

280
### ReactTestComponent Plugin
281

282
Handles React test renderer components for snapshot testing.
283

284
```typescript { .api }
285
const ReactTestComponent: Plugin;
286
```
287

288
**Supported Test Objects:**
289
- React test renderer instances
290
- Rendered component trees
291
- Test component snapshots
292

293
**Usage Examples:**
294

295
```typescript
296
import React from "react";
297
import renderer from "react-test-renderer";
298
import { format, plugins } from "pretty-format";
299
const { ReactTestComponent } = plugins;
300

301
// Format test renderer output
302
const component = React.createElement('button', 
303
  { onClick: () => {} }, 
304
  'Click me'
305
);
306

307
const testInstance = renderer.create(component);
308
const formatted = format(testInstance.toJSON(), {
309
  plugins: [ReactTestComponent],
310
  printFunctionName: false
311
});
312
// Result: <button
313
//   onClick=[Function]
314
// >
315
//   Click me
316
// </button>
317
```
318

319
### Plugin Combination
320

321
Multiple plugins can be used together, with the first matching plugin taking precedence.
322

323
**Usage Examples:**
324

325
```typescript
326
import { format, plugins } from "pretty-format";
327
const { ReactElement, DOMElement, Immutable } = plugins;
328

329
// Use multiple plugins for comprehensive formatting
330
const formatted = format(complexValue, {
331
  plugins: [
332
    ReactElement,      // Handle React elements first
333
    DOMElement,        // Then DOM elements  
334
    Immutable,         // Then Immutable.js structures
335
  ],
336
  indent: 2,
337
  highlight: true
338
});
339

340
// Plugin order matters - more specific plugins should come first
341
const orderedPlugins = [
342
  ReactTestComponent,  // Most specific
343
  ReactElement,        // Less specific
344
  DOMElement,          // General DOM handling
345
];
346
```
347

348
### Plugin Configuration
349

350
All built-in plugins respect the standard formatting options.
351

352
**Common Options:**
353
- `indent`: Affects nested element formatting
354
- `maxDepth`: Controls how deep to traverse component trees
355
- `maxWidth`: Limits number of children/properties shown
356
- `min`: Enables compact formatting
357
- `highlight`: Enables terminal colors (where supported)
358
- `printFunctionName`: Controls function name display in props
359

360
**Usage Examples:**
361

362
```typescript
363
// Compact React element formatting
364
const compact = format(reactElement, {
365
  plugins: [ReactElement],
366
  min: true
367
});
368

369
// Limited depth DOM tree
370
const shallow = format(domElement, {
371
  plugins: [DOMElement],
372
  maxDepth: 2
373
});
374

375
// Highlighted output
376
const colored = format(immutableData, {
377
  plugins: [Immutable],
378
  highlight: true,
379
  theme: {
380
    tag: 'cyan',
381
    prop: 'yellow',
382
    value: 'green'
383
  }
384
});
385
```