如何在Jasmine测试中创建表单以测试输入字段组件？

你完全可以在Jasmine中实现相同的操作，Angular的测试工具链原生支持这种需要依托表单运行的组件测试场景，实现逻辑和你在Storybook中的写法高度一致。

首先在测试文件中导入必要依赖，配置测试环境即可，参考代码如下：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule, FormGroup, FormControl } from '@angular/forms';
import { NeomFieldTextComponent } from './neom-field-text.component'; // 替换为你实际的组件路径

describe('NeomFieldTextComponent 输入字段测试', () => {
  let fixture: ComponentFixture<NeomFieldTextComponent>;
  let testForm: FormGroup;

  beforeEach(async () => {
    // 和Storybook中一致的表单初始化逻辑
    testForm = new FormGroup({
      fieldText: new FormControl('Hello')
    });

    await TestBed.configureTestingModule({
      imports: [ReactiveFormsModule], // 导入响应式表单依赖
      declarations: [NeomFieldTextComponent],
    })
    // 复用你Storybook里的模板代码，直接把组件包裹在表单内
    .overrideComponent(NeomFieldTextComponent, {
      set: {
        template: `
          <form [formGroup]="testForm">
            <neom-field-text formControlName="fieldText"></neom-field-text>
          </form>
        `
      }
    })
    .compileComponents();

    fixture = TestBed.createComponent(NeomFieldTextComponent);
    // 把表单实例绑定到测试组件的上下文
    fixture.componentInstance['testForm'] = testForm;
    fixture.detectChanges();
  });

  // 测试用例示例：验证初始值绑定正确
  it('初始化时应该正确加载表单默认值', () => {
    expect(testForm.get('fieldText').value).toBe('Hello');
    // 也可以直接获取DOM元素验证渲染结果
    const inputElement = fixture.nativeElement.querySelector('input');
    expect(inputElement.value).toBe('Hello');
  });

  // 可扩展其他测试：比如输入值变更校验、表单状态联动等
});

• 表单初始化的写法和你在Storybook中的写法完全一致，不需要做额外调整
• 模板部分可以直接复用Storybook的代码，不需要修改结构
• 后续可以通过表单实例、组件API、DOM节点三种方式验证组件的所有功能逻辑

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