Skip to content

Bayathy/analog-storybook

Repository files navigation

AnalogStorybook

Known Issues

componentWrapperDecorator does not work in Vitest (portable stories) environment

When using @analogjs/storybook-angular + @storybook/addon-vitest, adding componentWrapperDecorator to preview.ts causes story content to not render during Vitest execution.

// .storybook/preview.ts
import { componentWrapperDecorator } from '@storybook/angular';

const preview: Preview = {
  decorators: [componentWrapperDecorator((story) => `<div style="padding: 1rem;">${story}</div>`)],
};

The story argument passed to the decorator callback becomes undefined, resulting in the following rendered output:

<div style="padding: 1rem;">undefined</div>

This causes all interaction tests that query DOM elements within play functions to fail. The decorator works correctly on the Storybook dev server, but in the Vitest portable stories environment, the Angular-specific template string resolution mechanism that componentWrapperDecorator depends on does not function.

Root cause: renderAnnotations in @analogjs/storybook-angular/src/lib/testing.js does not include applyDecorators from @storybook/angular/client/config. Without it, the default Storybook decorator application is used instead of Angular's custom decorateStory, which is responsible for resolving component templates before passing them to decorators.

Fix: Add applyDecorators: configAnnotations.applyDecorators to renderAnnotations in testing.js.

Affected versions:

  • @analogjs/storybook-angular: 2.3.0-beta.16
  • storybook: 10.2.11
  • vitest: 4.0.x

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors