默认测试案例中的错误：无法读取未定义的属性（读取“用户名”）

Question

默认测试用例中出现错误。 我的组件有一个带有 NgModel 绑定的响应式表单，用于显示数据并读取表单中更新的数据。

在执行规范时，我在为表单的第一个输入创建组件测试用例时遇到错误。 将我的代码粘贴到此处。

HTML 文件

        <form [formGroup]="editUserFrom">
      <div>
        <label for="username">User Name</label>
        <input
          type="text"
          id="username"
          formControlName="username"
          [(ngModel)]="editableUserData.username"
        />
      </div>
      <div>
        <label for="name">Name</label>
        <input
          type="text"
          id="name"
          formControlName="name"
          [(ngModel)]="editableUserData.name"
        />
      </div>
      <div>
        <label for="email">Email </label>
        <input
          type="text"
          id="email"
          formControlName="email"
          [(ngModel)]="editableUserData.email"
        />
      </div>
      <div formGroupName="address">
        Address
        <div class="form-group">
          <label for="street">Street</label>
          <input
            type="text"
            name="street"
            formControlName="street"
            [(ngModel)]="editableUserData.address.street"
          />
        </div>
        <div class="form-group">
          <label for="suite">Suite</label>
          <input
            type="text"
            name="suite"
            formControlName="suite"
            [(ngModel)]="editableUserData.address.suite"
          />
        </div>
        <div class="form-group">
          <label for="city">City</label>
          <input
            type="text"
            name="city"
            formControlName="city"
            [(ngModel)]="editableUserData.address.city"
          />
        </div>
        <div class="form-group">
          <label for="zipcode">Pin Code</label>
          <input
            type="text"
            name="zipcode"
            formControlName="zipcode"
            [(ngModel)]="editableUserData.address.zipcode"
          />
        </div>
      </div>
      <div>
        <button type="submit" (click)="onSubmiteditUser()">Submit</button>
      </div>
    </form>

TS 文件

export class EdituserComponent implements OnInit {
  existingUsers: any;
  editableUserData: any = {};
  editableUserService: any;

 editUserFrom = new FormGroup({
username: new FormControl(),
name: new FormControl(),
email: new FormControl(),
address: new FormGroup({
  suite: new FormControl(),
  street: new FormControl(),
  city: new FormControl(),
  zipcode: new FormControl(),
}),
 });

  ngOnInit(): void {
this.editableUserService = this.userService.editUserSubject.subscribe(
  (user: any) => {
    this.editableUserData = user[user.length - 1];
  }
);
}

  constructor(
private userService: UserserviceService,
private router: Router
  ) {}
}

规格文件

     fixture = TestBed.createComponent(EdituserComponent);
  component = fixture.componentInstance;

  fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
  });

业力错误 类型错误：无法读取未定义的属性（读取“用户名”）

我正在尝试构建一个虚拟 Angular 项目来学习和实施单元测试。

我有一个编辑组件，它通过行为主题接收用户详细信息（仪表板组件在单击单个用户时显示所有用户，它将把我们路由到 EditComponent（这是仪表板的子组件）。

Answer 1

确保您的行为主体已使用默认值

{}

进行初始化。

因为行为主体如果不是对象或者为 null 或未定义，则会触发组件加载时的订阅。然后访问未定义的属性

username

，将抛出错误，这相信是你的问题。

editUserSubject: BehaviourSubject<any> = new BehaviourSubject<any>({});

在测试文件中。创建服务间谍如下。