Angular+Storybook CSF3中自定义组件Story的替代方案咨询

问题背景 #

• 环境：Angular 14、Storybook 6.5.9（遵循CSF3规范）
• 需求：测试组件被父组件引用时的工作状态，比如验证实现ControlValueAccessor的表单组件能否正确向父组件传递表单值
• 原实现：在Story中引入自定义独立组件MultiSelectDropdownTemplateStoryComponent，模拟父组件使用场景，同时作为新开发者的参考示例
• 遇到的问题：升级到CSF3后，Story中的component属性被标记为废弃（将在V7版本移除），且StoryObj<T>接口不再包含该属性，无法沿用原有方式

可行解决方案 #

1. 直接使用template属性模拟父组件场景（推荐） #

这是CSF3官方推荐的替代方案，无需额外创建独立组件，直接在Story的template中编写模拟父组件的模板代码，同时保留测试和参考价值：

import { Meta, StoryObj } from '@storybook/angular';
import { MultiSelectDropdownComponent } from './multi-select-dropdown.component';
import { FormsModule, ReactiveFormsModule, FormGroup, FormControl } from '@angular/forms';

const meta: Meta<MultiSelectDropdownComponent> = {
  title: 'Components/MultiSelectDropdown',
  component: MultiSelectDropdownComponent,
  decorators: [
    moduleMetadata({
      imports: [FormsModule, ReactiveFormsModule],
    }),
  ],
};

export default meta;
type Story = StoryObj<MultiSelectDropdownComponent>;

export const FormIntegration: Story = {
  template: `
    <form [formGroup]="testForm">
      <app-multi-select-dropdown formControlName="selectedItems"></app-multi-select-dropdown>
      <p>父组件获取的表单值：{{ testForm.get('selectedItems')?.value | json }}</p>
    </form>
  `,
  props: {
    testForm: new FormGroup({
      selectedItems: new FormControl([]),
    }),
  },
};

优势：

• 无需额外创建独立组件，代码更精简
• 直观展示父组件的使用逻辑，便于新开发者参考
• 完全符合CSF3规范，规避废弃属性的使用风险

2. 使用render函数过渡（兼容写法） #

如果需要逐步迁移，可以使用CSF3标准的render函数替代原有的component属性，本质仍是模板驱动的方式：

export const NgModelIntegration: Story = {
  render: (args) => ({
    props: args,
    template: `
      <form #testForm="ngForm">
        <app-multi-select-dropdown 
          name="selectedItems" 
          [(ngModel)]="selectedValues"
          (ngModelChange)="logValue($event)"
        ></app-multi-select-dropdown>
        <p>当前选中值：{{ selectedValues | json }}</p>
      </form>
    `,
  }),
  props: {
    selectedValues: [],
    logValue: (value: any[]) => console.log('父组件接收值：', value),
  },
};

3. 保留自定义父组件的调整方案 #

如果必须保留MultiSelectDropdownTemplateStoryComponent作为示例参考，可以将其直接嵌入Story的template中，同时通过moduleMetadata声明该组件：

import { MultiSelectDropdownTemplateStoryComponent } from './multi-select-dropdown-template-story.component';

export const WithCustomParent: Story = {
  template: `<app-multi-select-dropdown-template-story></app-multi-select-dropdown-template-story>`,
  decorators: [
    moduleMetadata({
      declarations: [MultiSelectDropdownTemplateStoryComponent],
    }),
  ],
};

这种方式保留了原有的自定义父组件示例，同时符合CSF3的规范要求。

总结 #

CSF3确实推荐使用template/render策略替代原有自定义独立组件的实现方式，这也是Storybook后续版本的标准方向。上述方案均能满足测试组件与父组件交互的需求，其中直接使用template的方式最简洁高效，同时兼顾了示例参考的作用。

内容的提问来源于stack exchange，提问作者Estevao Santiago