or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.mdjest-integration.mdrendering.mdtree-traversal.mdtype-checking.md
tile.json

tessl/npm-inferno-test-utils

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/inferno-test-utils@9.0.x

To install, run

npx @tessl/cli install tessl/npm-inferno-test-utils@9.0.0

index.mddocs/

inferno-test-utils

A comprehensive suite of testing utilities specifically designed for Inferno applications, providing functions for traversing, searching, and validating rendered component trees with support for finding DOM elements and VNodes by various criteria.

Package Information

  • Package Name: inferno-test-utils
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Version: 9.0.3

Installation

npm install inferno --save
npm install inferno-test-utils --save-dev

Core Imports

ESM (ES Modules)

import {
  // Type checkers
  isVNode,
  isVNodeOfType,
  isDOMVNode,
  isDOMVNodeOfType,
  isClassVNode,
  isClassVNodeOfType,
  isFunctionalVNode,
  isFunctionalVNodeOfType,
  isComponentVNode,
  isComponentVNodeOfType,
  isTextVNode,
  isDOMElement,
  isDOMElementOfType,
  isRenderedClassComponent,
  isRenderedClassComponentOfType,
  
  // Tree traversal
  findAllInRenderedTree,
  findAllInVNodeTree,
  
  // Search functions (multiple results)
  scryRenderedDOMElementsWithClass,
  scryRenderedDOMElementsWithTag,
  scryRenderedVNodesWithType,
  scryVNodesWithType,
  
  // Find functions (single result)
  findRenderedDOMElementWithClass,
  findRenderedDOMElementWithTag,
  findRenderedVNodeWithType,
  findVNodeWithType,
  
  // Rendering utilities
  renderIntoContainer,
  getTagNameOfVNode,
  Wrapper,
  
  // Jest integration
  vNodeToSnapshot,
  renderToSnapshot
} from 'inferno-test-utils';

CommonJS

const {
  // Type checkers
  isVNode,
  isVNodeOfType,
  isDOMVNode,
  isDOMVNodeOfType,
  isClassVNode,
  isClassVNodeOfType,
  isFunctionalVNode,
  isFunctionalVNodeOfType,
  isComponentVNode,
  isComponentVNodeOfType,
  isTextVNode,
  isDOMElement,
  isDOMElementOfType,
  isRenderedClassComponent,
  isRenderedClassComponentOfType,
  
  // Tree traversal
  findAllInRenderedTree,
  findAllInVNodeTree,
  
  // Search functions (multiple results)
  scryRenderedDOMElementsWithClass,
  scryRenderedDOMElementsWithTag,
  scryRenderedVNodesWithType,
  scryVNodesWithType,
  
  // Find functions (single result)
  findRenderedDOMElementWithClass,
  findRenderedDOMElementWithTag,
  findRenderedVNodeWithType,
  findVNodeWithType,
  
  // Rendering utilities
  renderIntoContainer,
  getTagNameOfVNode,
  Wrapper,
  
  // Jest integration
  vNodeToSnapshot,
  renderToSnapshot
} = require('inferno-test-utils');

Basic Usage

Setting up a test environment

import { render } from 'inferno';
import { renderIntoContainer, findRenderedDOMElementWithClass } from 'inferno-test-utils';

// Create a test component
function TestComponent() {
  return <div className="test-component">Hello World</div>;
}

// Render into container for testing
const renderedTree = renderIntoContainer(<TestComponent />);

// Find elements in the rendered tree
const element = findRenderedDOMElementWithClass(renderedTree, 'test-component');
console.log(element.textContent); // "Hello World"

Type checking VNodes

import { createElement } from 'inferno-create-element';
import { isVNode, isDOMVNode, isClassVNode } from 'inferno-test-utils';

const domVNode = createElement('div');
const classVNode = createElement(MyComponent);

console.log(isVNode(domVNode)); // true
console.log(isDOMVNode(domVNode)); // true
console.log(isClassVNode(classVNode)); // true

Architecture

The inferno-test-utils package is organized into several functional areas that work together to provide comprehensive testing capabilities:

Core Dependencies

The package relies on several key Inferno ecosystem packages:

  • inferno: Core rendering and VNode types
  • inferno-shared: Shared utility functions (type checking, error handling)
  • inferno-vnode-flags: VNode flag constants that identify component types and states

VNode Flag System

The package uses Inferno's VNode flag system to efficiently identify component types:

  • VNodeFlags.Element - DOM elements (div, span, etc.)
  • VNodeFlags.ComponentClass - Class-based components
  • VNodeFlags.ComponentFunction - Functional components
  • VNodeFlags.Text - Text nodes
  • VNodeFlags.Component - Generic component flag

These flags enable fast type checking without expensive instanceof operations.

Functional Areas

  1. Type Checkers - Functions to identify VNode and DOM element types using VNode flags
  2. Tree Traversal - Recursive functions to traverse component trees using predicate-based filtering
  3. Element Finders - Higher-level search functions that combine traversal with specific criteria
  4. Rendering Utilities - Functions to render components into test containers and extract metadata
  5. Jest Integration - Snapshot generation that converts VNode trees to Jest-compatible format

Capabilities

Type Checking

Comprehensive type checking utilities for identifying VNodes, DOM elements, and component types with both generic and type-specific checkers.

// VNode type checking
function isVNode(obj: any): obj is VNode
function isVNodeOfType(obj: VNode, type: unknown): boolean
function isDOMVNode(vNode: any): vNode is VNode
function isDOMVNodeOfType(obj: VNode, type: string): boolean
function isFunctionalVNode(obj: VNode): obj is VNode
function isFunctionalVNodeOfType(obj: VNode, type: Function): boolean
function isClassVNode(obj: VNode): obj is VNode
function isClassVNodeOfType(obj: VNode, type: Inferno.ComponentClass<unknown> | Inferno.StatelessComponent<unknown>): boolean
function isComponentVNode(obj: VNode): obj is VNode
function isComponentVNodeOfType(obj: VNode, type: Function): boolean
function isTextVNode(obj: VNode): obj is VNode

// DOM element type checking
function isDOMElement(obj: any): boolean
function isDOMElementOfType(obj: any, type: string): boolean

// Rendered component type checking
function isRenderedClassComponent(obj: any): boolean
function isRenderedClassComponentOfType(obj: any, type: Inferno.ComponentClass<unknown> | Inferno.StatelessComponent<unknown>): boolean

Type Checking API

Tree Traversal and Search

Powerful tree traversal functions for finding elements in rendered trees and VNode trees with predicate-based filtering.

// Tree traversal
function findAllInRenderedTree(renderedTree: any, predicate: (vNode: VNode) => boolean): VNode[] | any
function findAllInVNodeTree(vNodeTree: VNode, predicate: (vNode: VNode) => boolean): any

// Multiple result search (scry functions)
function scryRenderedDOMElementsWithClass(renderedTree: any, classNames: string | string[]): Element[]
function scryRenderedDOMElementsWithTag(renderedTree: any, tagName: string): Element[]
function scryRenderedVNodesWithType(renderedTree: any, type: unknown): VNode[]
function scryVNodesWithType(vNodeTree: VNode, type: unknown): VNode[]

// Single result search (find functions - throw on multiple matches)
function findRenderedDOMElementWithClass(renderedTree: any, classNames: string | string[]): Element
function findRenderedDOMElementWithTag(renderedTree: any, tagName: string): Element
function findRenderedVNodeWithType(renderedTree: any, type: unknown): VNode
function findVNodeWithType(vNodeTree: VNode, type: unknown): VNode

Tree Traversal and Search API

Rendering Utilities

Utilities for rendering components into test environments and extracting useful information from VNodes.

// Rendering
function renderIntoContainer(input: boolean | VNode | InfernoChild | InfernoFragment | null | undefined): Component<any, any> | VNode

// Utility functions
function getTagNameOfVNode(vNode: VNode): string | undefined

// Test wrapper component
class Wrapper<P, S> extends Component<P, S> {
  public render(): InfernoNode
}

Rendering Utilities API

Jest Integration

Native Jest snapshot testing support with functions to convert VNodes to Jest-compatible snapshots.

// Snapshot functions
function vNodeToSnapshot(vNode: VNode): InfernoSnapshot
function renderToSnapshot(input: VNode): InfernoSnapshot

Jest Integration API

Types

// Jest snapshot interface
interface InfernoSnapshot {
  type: string;
  props: Record<string, any>;
  children: null | InfernoTestRendererNode[];
  $$typeof?: symbol | string;
}

type InfernoTestRendererNode = InfernoSnapshot | string;

// Inferno types (from inferno package)
interface VNode {
  flags: number;
  type: any;
  props: any;
  children: any;
  key: any;
  ref: any;
  className: string | null;
  dom: Element | null;
  childFlags: number;
}

interface Component<P = {}, S = {}> {
  props: P;
  state: S;
  context: any;
  render(): InfernoNode;
  setState(partial: Partial<S>, callback?: () => void): void;
}

type InfernoNode = VNode | string | number | boolean | null | undefined | InfernoFragment;
type InfernoChild = InfernoNode | Array<InfernoNode>;
type InfernoFragment = {} | InfernoChild[];

type ComponentClass<P = {}> = new (props: P, context?: any) => Component<P, any>;
type StatelessComponent<P = {}> = (props: P, context?: any) => InfernoNode;

Error Handling

Functions that expect single results (prefixed with find) will throw descriptive errors when:

  • No matches are found
  • Multiple matches are found when expecting exactly one match
  • Invalid input types are provided

Example error messages:

  • "Did not find exactly one match (found 3) for class: inner"
  • "findAllInVNodeTree(vNodeTree, predicate) vNodeTree must be a VNode instance"

Dependencies

  • inferno: Core Inferno library for rendering and VNode types
  • inferno-shared: Shared utilities (type checking functions, error handling)
  • inferno-vnode-flags: VNode flag constants (VNodeFlags) for component type identification and child flag constants (ChildFlags) for tree traversal optimization