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.16storybook: 10.2.11vitest: 4.0.x