0
# Type Checking API
1

2
Comprehensive type checking utilities for identifying VNodes, DOM elements, and component types. These functions are essential for writing robust tests that can distinguish between different kinds of elements and components in your Inferno application.
3

4
## VNode Type Checkers
5

6
### Basic VNode Checking
7

8
```javascript { .api }
9
/**
10
 * Checks if an object is a VNode
11
 * @param obj - Any object to check
12
 * @returns true if the object is a valid VNode
13
 */
14
function isVNode(obj: any): boolean
15
```
16

17
```javascript
18
import { isVNode } from 'inferno-test-utils';
19
import { createElement } from 'inferno-create-element';
20

21
const vnode = createElement('div');
22
const notVNode = { type: 'div' };
23

24
console.log(isVNode(vnode)); // true
25
console.log(isVNode(notVNode)); // false
26
```
27

28
```javascript { .api }
29
/**
30
 * Checks if a VNode is of a specific type
31
 * @param obj - VNode to check
32
 * @param type - Type to match against (component class, function, or string)
33
 * @returns true if VNode matches the specified type
34
 */
35
function isVNodeOfType(obj: VNode, type: unknown): boolean
36
```
37

38
```javascript
39
import { isVNodeOfType } from 'inferno-test-utils';
40
import { createElement } from 'inferno-create-element';
41

42
function MyComponent() { return <div />; }
43
class MyClassComponent extends Component { render() { return <div />; } }
44

45
const funcVNode = createElement(MyComponent);
46
const classVNode = createElement(MyClassComponent);
47
const domVNode = createElement('div');
48

49
console.log(isVNodeOfType(funcVNode, MyComponent)); // true
50
console.log(isVNodeOfType(classVNode, MyClassComponent)); // true
51
console.log(isVNodeOfType(domVNode, 'div')); // true
52
console.log(isVNodeOfType(domVNode, 'span')); // false
53
```
54

55
### DOM VNode Checking
56

57
```javascript { .api }
58
/**
59
 * Checks if a VNode represents a DOM element
60
 * @param vNode - VNode to check
61
 * @returns true if VNode represents a DOM element (not a component)
62
 */
63
function isDOMVNode(vNode: any): vNode is VNode
64
```
65

66
```javascript { .api }
67
/**
68
 * Checks if a DOM VNode is of a specific tag type
69
 * @param obj - VNode to check
70
 * @param type - HTML tag name to match
71
 * @returns true if VNode is a DOM element with the specified tag name
72
 */
73
function isDOMVNodeOfType(obj: VNode, type: string): boolean
74
```
75

76
```javascript
77
import { isDOMVNode, isDOMVNodeOfType } from 'inferno-test-utils';
78
import { createElement } from 'inferno-create-element';
79

80
function MyComponent() { return <div />; }
81

82
const domVNode = createElement('div');
83
const componentVNode = createElement(MyComponent);
84

85
console.log(isDOMVNode(domVNode)); // true
86
console.log(isDOMVNode(componentVNode)); // false
87
console.log(isDOMVNodeOfType(domVNode, 'div')); // true
88
console.log(isDOMVNodeOfType(domVNode, 'span')); // false
89
```
90

91
### Component VNode Checking
92

93
```javascript { .api }
94
/**
95
 * Checks if a VNode represents a functional component
96
 * @param obj - VNode to check
97
 * @returns true if VNode represents a functional component
98
 */
99
function isFunctionalVNode(obj: VNode): obj is VNode
100
```
101

102
```javascript { .api }
103
/**
104
 * Checks if a functional VNode is of a specific type
105
 * @param obj - VNode to check
106
 * @param type - Function component to match
107
 * @returns true if VNode is a functional component of the specified type
108
 */
109
function isFunctionalVNodeOfType(obj: VNode, type: Function): boolean
110
```
111

112
```javascript { .api }
113
/**
114
 * Checks if a VNode represents a class component
115
 * @param obj - VNode to check
116
 * @returns true if VNode represents a class component
117
 */
118
function isClassVNode(obj: VNode): obj is VNode
119
```
120

121
```javascript { .api }
122
/**
123
 * Checks if a class VNode is of a specific type
124
 * @param obj - VNode to check
125
 * @param type - Component class or stateless component to match
126
 * @returns true if VNode is a class component of the specified type
127
 */
128
function isClassVNodeOfType(obj: VNode, type: ComponentClass<unknown> | StatelessComponent<unknown>): boolean
129
```
130

131
```javascript { .api }
132
/**
133
 * Checks if a VNode represents any kind of component (functional or class)
134
 * @param obj - VNode to check
135
 * @returns true if VNode represents either a functional or class component
136
 */
137
function isComponentVNode(obj: VNode): obj is VNode
138
```
139

140
```javascript { .api }
141
/**
142
 * Checks if a component VNode is of a specific type
143
 * @param obj - VNode to check
144
 * @param type - Component function or class to match
145
 * @returns true if VNode is a component of the specified type
146
 */
147
function isComponentVNodeOfType(obj: VNode, type: Function): boolean
148
```
149

150
```javascript
151
import { 
152
  isFunctionalVNode, 
153
  isFunctionalVNodeOfType,
154
  isClassVNode, 
155
  isClassVNodeOfType,
156
  isComponentVNode,
157
  isComponentVNodeOfType
158
} from 'inferno-test-utils';
159
import { Component, createElement } from 'inferno';
160

161
function FunctionalComponent() { return <div />; }
162
class ClassComponent extends Component { render() { return <div />; } }
163

164
const funcVNode = createElement(FunctionalComponent);
165
const classVNode = createElement(ClassComponent);
166
const domVNode = createElement('div');
167

168
// Functional component checks
169
console.log(isFunctionalVNode(funcVNode)); // true
170
console.log(isFunctionalVNode(classVNode)); // false
171
console.log(isFunctionalVNodeOfType(funcVNode, FunctionalComponent)); // true
172

173
// Class component checks
174
console.log(isClassVNode(classVNode)); // true
175
console.log(isClassVNode(funcVNode)); // false
176
console.log(isClassVNodeOfType(classVNode, ClassComponent)); // true
177

178
// General component checks
179
console.log(isComponentVNode(funcVNode)); // true
180
console.log(isComponentVNode(classVNode)); // true
181
console.log(isComponentVNode(domVNode)); // false
182
console.log(isComponentVNodeOfType(funcVNode, FunctionalComponent)); // true
183
console.log(isComponentVNodeOfType(classVNode, ClassComponent)); // true
184
```
185

186
### Text VNode Checking
187

188
```javascript { .api }
189
/**
190
 * Checks if a VNode represents a text node
191
 * @param obj - VNode to check
192
 * @returns true if VNode represents text content
193
 */
194
function isTextVNode(obj: VNode): obj is VNode
195
```
196

197
```javascript
198
import { isTextVNode } from 'inferno-test-utils';
199

200
// Text VNodes are typically created internally by Inferno
201
// This function is useful when traversing component trees
202
const textVNode = { flags: 16, children: "Hello World" }; // Simplified example
203
console.log(isTextVNode(textVNode)); // true if flags indicate text node
204
```
205

206
## DOM Element Type Checkers
207

208
These functions work with actual DOM elements, not VNodes.
209

210
```javascript { .api }
211
/**
212
 * Checks if an object is a DOM element
213
 * @param obj - Any object to check
214
 * @returns true if the object is a DOM element
215
 */
216
function isDOMElement(obj: any): boolean
217
```
218

219
```javascript { .api }
220
/**
221
 * Checks if a DOM element is of a specific tag type
222
 * @param obj - Object to check
223
 * @param type - HTML tag name to match (case-insensitive)
224
 * @returns true if object is a DOM element with the specified tag name
225
 */
226
function isDOMElementOfType(obj: any, type: string): boolean
227
```
228

229
```javascript
230
import { isDOMElement, isDOMElementOfType } from 'inferno-test-utils';
231

232
const divElement = document.createElement('div');
233
const spanElement = document.createElement('span');
234
const notElement = { tagName: 'div' };
235

236
console.log(isDOMElement(divElement)); // true
237
console.log(isDOMElement(notElement)); // false
238
console.log(isDOMElementOfType(divElement, 'div')); // true
239
console.log(isDOMElementOfType(divElement, 'DIV')); // true (case-insensitive)
240
console.log(isDOMElementOfType(spanElement, 'div')); // false
241
```
242

243
## Rendered Component Type Checkers
244

245
These functions work with rendered component instances.
246

247
```javascript { .api }
248
/**
249
 * Checks if an object is a rendered class component instance
250
 * @param obj - Any object to check
251
 * @returns true if the object is a rendered class component instance
252
 */
253
function isRenderedClassComponent(obj: any): boolean
254
```
255

256
```javascript { .api }
257
/**
258
 * Checks if a rendered class component is of a specific type
259
 * @param obj - Object to check
260
 * @param type - Component class or stateless component to match
261
 * @returns true if object is a rendered instance of the specified component type
262
 */
263
function isRenderedClassComponentOfType(obj: any, type: ComponentClass<unknown> | StatelessComponent<unknown>): boolean
264
```
265

266
```javascript
267
import { 
268
  isRenderedClassComponent, 
269
  isRenderedClassComponentOfType,
270
  renderIntoContainer 
271
} from 'inferno-test-utils';
272
import { Component } from 'inferno';
273

274
class MyComponent extends Component {
275
  render() {
276
    return <div>My Component</div>;
277
  }
278
}
279

280
class AnotherComponent extends Component {
281
  render() {
282
    return <div>Another Component</div>;
283
  }
284
}
285

286
const renderedTree = renderIntoContainer(<MyComponent />);
287

288
// If renderedTree contains a class component instance
289
console.log(isRenderedClassComponent(renderedTree)); // true if it's a class component
290
console.log(isRenderedClassComponentOfType(renderedTree, MyComponent)); // true
291
console.log(isRenderedClassComponentOfType(renderedTree, AnotherComponent)); // false
292
```
293

294
## Common Usage Patterns
295

296
### Type Guards in Test Predicates
297

298
```javascript
299
import { findAllInRenderedTree, isClassVNode, isDOMVNode } from 'inferno-test-utils';
300

301
const renderedTree = renderIntoContainer(<MyApp />);
302

303
// Find all class components
304
const classComponents = findAllInRenderedTree(renderedTree, (vnode) => 
305
  isClassVNode(vnode)
306
);
307

308
// Find all DOM elements
309
const domElements = findAllInRenderedTree(renderedTree, (vnode) => 
310
  isDOMVNode(vnode)
311
);
312

313
// Find specific component types
314
const myComponents = findAllInRenderedTree(renderedTree, (vnode) => 
315
  isClassVNodeOfType(vnode, MyComponent)
316
);
317
```
318

319
### Combining Type Checks
320

321
```javascript
322
import { 
323
  findAllInRenderedTree, 
324
  isDOMVNode, 
325
  isDOMVNodeOfType 
326
} from 'inferno-test-utils';
327

328
const renderedTree = renderIntoContainer(<MyApp />);
329

330
// Find all div elements
331
const divElements = findAllInRenderedTree(renderedTree, (vnode) => 
332
  isDOMVNode(vnode) && isDOMVNodeOfType(vnode, 'div')
333
);
334
```