Suite of utilities for testing Inferno applications with comprehensive tree traversal, element finding, and Jest snapshot integration.
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
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.
/**
* Checks if an object is a VNode
* @param obj - Any object to check
* @returns true if the object is a valid VNode
*/
function isVNode(obj: any): booleanimport { isVNode } from 'inferno-test-utils';
import { createElement } from 'inferno-create-element';
const vnode = createElement('div');
const notVNode = { type: 'div' };
console.log(isVNode(vnode)); // true
console.log(isVNode(notVNode)); // false/**
* Checks if a VNode is of a specific type
* @param obj - VNode to check
* @param type - Type to match against (component class, function, or string)
* @returns true if VNode matches the specified type
*/
function isVNodeOfType(obj: VNode, type: unknown): booleanimport { isVNodeOfType } from 'inferno-test-utils';
import { createElement } from 'inferno-create-element';
function MyComponent() { return <div />; }
class MyClassComponent extends Component { render() { return <div />; } }
const funcVNode = createElement(MyComponent);
const classVNode = createElement(MyClassComponent);
const domVNode = createElement('div');
console.log(isVNodeOfType(funcVNode, MyComponent)); // true
console.log(isVNodeOfType(classVNode, MyClassComponent)); // true
console.log(isVNodeOfType(domVNode, 'div')); // true
console.log(isVNodeOfType(domVNode, 'span')); // false/**
* Checks if a VNode represents a DOM element
* @param vNode - VNode to check
* @returns true if VNode represents a DOM element (not a component)
*/
function isDOMVNode(vNode: any): vNode is VNode/**
* Checks if a DOM VNode is of a specific tag type
* @param obj - VNode to check
* @param type - HTML tag name to match
* @returns true if VNode is a DOM element with the specified tag name
*/
function isDOMVNodeOfType(obj: VNode, type: string): booleanimport { isDOMVNode, isDOMVNodeOfType } from 'inferno-test-utils';
import { createElement } from 'inferno-create-element';
function MyComponent() { return <div />; }
const domVNode = createElement('div');
const componentVNode = createElement(MyComponent);
console.log(isDOMVNode(domVNode)); // true
console.log(isDOMVNode(componentVNode)); // false
console.log(isDOMVNodeOfType(domVNode, 'div')); // true
console.log(isDOMVNodeOfType(domVNode, 'span')); // false/**
* Checks if a VNode represents a functional component
* @param obj - VNode to check
* @returns true if VNode represents a functional component
*/
function isFunctionalVNode(obj: VNode): obj is VNode/**
* Checks if a functional VNode is of a specific type
* @param obj - VNode to check
* @param type - Function component to match
* @returns true if VNode is a functional component of the specified type
*/
function isFunctionalVNodeOfType(obj: VNode, type: Function): boolean/**
* Checks if a VNode represents a class component
* @param obj - VNode to check
* @returns true if VNode represents a class component
*/
function isClassVNode(obj: VNode): obj is VNode/**
* Checks if a class VNode is of a specific type
* @param obj - VNode to check
* @param type - Component class or stateless component to match
* @returns true if VNode is a class component of the specified type
*/
function isClassVNodeOfType(obj: VNode, type: ComponentClass<unknown> | StatelessComponent<unknown>): boolean/**
* Checks if a VNode represents any kind of component (functional or class)
* @param obj - VNode to check
* @returns true if VNode represents either a functional or class component
*/
function isComponentVNode(obj: VNode): obj is VNode/**
* Checks if a component VNode is of a specific type
* @param obj - VNode to check
* @param type - Component function or class to match
* @returns true if VNode is a component of the specified type
*/
function isComponentVNodeOfType(obj: VNode, type: Function): booleanimport {
isFunctionalVNode,
isFunctionalVNodeOfType,
isClassVNode,
isClassVNodeOfType,
isComponentVNode,
isComponentVNodeOfType
} from 'inferno-test-utils';
import { Component, createElement } from 'inferno';
function FunctionalComponent() { return <div />; }
class ClassComponent extends Component { render() { return <div />; } }
const funcVNode = createElement(FunctionalComponent);
const classVNode = createElement(ClassComponent);
const domVNode = createElement('div');
// Functional component checks
console.log(isFunctionalVNode(funcVNode)); // true
console.log(isFunctionalVNode(classVNode)); // false
console.log(isFunctionalVNodeOfType(funcVNode, FunctionalComponent)); // true
// Class component checks
console.log(isClassVNode(classVNode)); // true
console.log(isClassVNode(funcVNode)); // false
console.log(isClassVNodeOfType(classVNode, ClassComponent)); // true
// General component checks
console.log(isComponentVNode(funcVNode)); // true
console.log(isComponentVNode(classVNode)); // true
console.log(isComponentVNode(domVNode)); // false
console.log(isComponentVNodeOfType(funcVNode, FunctionalComponent)); // true
console.log(isComponentVNodeOfType(classVNode, ClassComponent)); // true/**
* Checks if a VNode represents a text node
* @param obj - VNode to check
* @returns true if VNode represents text content
*/
function isTextVNode(obj: VNode): obj is VNodeimport { isTextVNode } from 'inferno-test-utils';
// Text VNodes are typically created internally by Inferno
// This function is useful when traversing component trees
const textVNode = { flags: 16, children: "Hello World" }; // Simplified example
console.log(isTextVNode(textVNode)); // true if flags indicate text nodeThese functions work with actual DOM elements, not VNodes.
/**
* Checks if an object is a DOM element
* @param obj - Any object to check
* @returns true if the object is a DOM element
*/
function isDOMElement(obj: any): boolean/**
* Checks if a DOM element is of a specific tag type
* @param obj - Object to check
* @param type - HTML tag name to match (case-insensitive)
* @returns true if object is a DOM element with the specified tag name
*/
function isDOMElementOfType(obj: any, type: string): booleanimport { isDOMElement, isDOMElementOfType } from 'inferno-test-utils';
const divElement = document.createElement('div');
const spanElement = document.createElement('span');
const notElement = { tagName: 'div' };
console.log(isDOMElement(divElement)); // true
console.log(isDOMElement(notElement)); // false
console.log(isDOMElementOfType(divElement, 'div')); // true
console.log(isDOMElementOfType(divElement, 'DIV')); // true (case-insensitive)
console.log(isDOMElementOfType(spanElement, 'div')); // falseThese functions work with rendered component instances.
/**
* Checks if an object is a rendered class component instance
* @param obj - Any object to check
* @returns true if the object is a rendered class component instance
*/
function isRenderedClassComponent(obj: any): boolean/**
* Checks if a rendered class component is of a specific type
* @param obj - Object to check
* @param type - Component class or stateless component to match
* @returns true if object is a rendered instance of the specified component type
*/
function isRenderedClassComponentOfType(obj: any, type: ComponentClass<unknown> | StatelessComponent<unknown>): booleanimport {
isRenderedClassComponent,
isRenderedClassComponentOfType,
renderIntoContainer
} from 'inferno-test-utils';
import { Component } from 'inferno';
class MyComponent extends Component {
render() {
return <div>My Component</div>;
}
}
class AnotherComponent extends Component {
render() {
return <div>Another Component</div>;
}
}
const renderedTree = renderIntoContainer(<MyComponent />);
// If renderedTree contains a class component instance
console.log(isRenderedClassComponent(renderedTree)); // true if it's a class component
console.log(isRenderedClassComponentOfType(renderedTree, MyComponent)); // true
console.log(isRenderedClassComponentOfType(renderedTree, AnotherComponent)); // falseimport { findAllInRenderedTree, isClassVNode, isDOMVNode } from 'inferno-test-utils';
const renderedTree = renderIntoContainer(<MyApp />);
// Find all class components
const classComponents = findAllInRenderedTree(renderedTree, (vnode) =>
isClassVNode(vnode)
);
// Find all DOM elements
const domElements = findAllInRenderedTree(renderedTree, (vnode) =>
isDOMVNode(vnode)
);
// Find specific component types
const myComponents = findAllInRenderedTree(renderedTree, (vnode) =>
isClassVNodeOfType(vnode, MyComponent)
);import {
findAllInRenderedTree,
isDOMVNode,
isDOMVNodeOfType
} from 'inferno-test-utils';
const renderedTree = renderIntoContainer(<MyApp />);
// Find all div elements
const divElements = findAllInRenderedTree(renderedTree, (vnode) =>
isDOMVNode(vnode) && isDOMVNodeOfType(vnode, 'div')
);