CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-inferno-test-utils

Suite of utilities for testing Inferno applications with comprehensive tree traversal, element finding, and Jest snapshot integration.

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

type-checking.mddocs/

Type Checking API

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.

VNode Type Checkers

Basic VNode Checking

/**
 * 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): boolean
import { 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): boolean
import { 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

DOM VNode Checking

/**
 * 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): boolean
import { 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

Component VNode Checking

/**
 * 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): boolean
import { 
  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

Text VNode Checking

/**
 * 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 VNode
import { 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 node

DOM Element Type Checkers

These 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): boolean
import { 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')); // false

Rendered Component Type Checkers

These 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>): boolean
import { 
  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)); // false

Common Usage Patterns

Type Guards in Test Predicates

import { 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)
);

Combining Type Checks

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')
);

docs

index.md

jest-integration.md

rendering.md

tree-traversal.md

type-checking.md

tile.json