tessl/npm-storybook--builder-webpack4

Webpack 4-based builder for Storybook that provides framework-agnostic build engine for preview iframe compilation and bundling.

1.01x

Overview

Eval results

Files

Story Test Utilities

Name: tessl/npm-storybook--builder-webpack4
Rating: 0.91 (1 reviews)
Author: tessl

A testing utility library that reuses UI component stories in unit tests, enabling snapshot testing and component validation outside of Storybook's UI.

Capabilities

Story Composition

Compose story objects with custom arguments and parameters for testing purposes.

Given a Button story with default args { label: 'Click me', variant: 'primary' }, composing it with args { variant: 'secondary' } produces a story with merged args { label: 'Click me', variant: 'secondary' } @test
Composing a story with both args and parameters merges them correctly with the original story configuration @test

Story Rendering

Render composed stories to produce renderable elements for snapshot and visual testing.

A composed Button story renders to a valid React element that can be rendered in a test environment @test
Multiple composed stories from the same component can be rendered independently in the same test file @test

Test Integration

Load and prepare all stories from a story file for use in test environments.

Loading stories from a CSF file returns all exported stories as testable functions @test
Each loaded story includes its story ID and name for test identification @test

Implementation

@generates

API

import type { StoryContext, Args, Parameters } from '@storybook/types';

/**
 * Represents a story that can be composed and rendered in tests
 */
export interface ComposableStory<TArgs = Args> {
  (args?: Partial<TArgs>): any;
  storyName: string;
  id: string;
  args: TArgs;
  parameters: Parameters;
}

/**
 * Compose a story with custom args, decorators, and parameters
 * @param story - The original story function or object
 * @param meta - The story metadata (default export from CSF file)
 * @param overrides - Optional overrides for args and parameters
 * @returns A composable story that can be called with args to render
 */
export function composeStory<TArgs = Args>(
  story: any,
  meta: any,
  overrides?: {
    args?: Partial<TArgs>;
    parameters?: Parameters;
  }
): ComposableStory<TArgs>;

/**
 * Compose all stories from a CSF module for testing
 * @param csfModule - The imported CSF module (default + named exports)
 * @returns An object with all stories as composable functions
 */
export function composeStories<T = any>(csfModule: any): Record<string, ComposableStory>;

/**
 * Set the project annotations (decorators, parameters, etc.) for all composed stories
 * @param annotations - Project-level configuration from preview.js
 */
export function setProjectAnnotations(annotations: {
  decorators?: any[];
  parameters?: Parameters;
  globalTypes?: any;
  [key: string]: any;
}): void;

Dependencies { .dependencies }

@storybook/react { .dependency }

Provides React-specific story rendering and composition utilities. Use the portable stories API from this package.

@satisfied-by

Install with Tessl CLI

npx tessl i tessl/npm-storybook--builder-webpack4