Блог

Главная - Вопросы по программированию - Как исправить ошибку типа Не удается прочитать свойство undefined

Как исправить ошибку типа Не удается прочитать свойство undefined

#angular #typescript #unit-testing #testing #jestjs

Вопрос:

Я пытаюсь написать модульные тестовые примеры, используя Jest в своем проекте Angular, и я сталкиваюсь с этими ошибками, когда пытаюсь запустить свой тестовый файл

 TypeError: Cannot read property 'features' of undefined

TypeError: Cannot read property 'enhancement' of undefined

TypeError: Cannot read property 'bug' of undefined

Я читаю эти свойства в своих HTML-файлах и подумал, что если я создам макет данных в файле side spec.ts, то это должно исправить это, но я не уверен, почему я все еще получаю эти ошибки.

Редактор-Dialog.component.ts

 export class EditorDialogComponent implements OnInit {
  post: PostSection = {
    title: '',
    release: {
      features: null,
      enhancements: null,
      bug: null,
    },
    blog: null,
    type: 1,
  };

В моем Editor-Dialog.html Я читаю это так

   <ngx-wig
          [(ngModel)]="post.release.features"
          formControlName="enhancementDescription"></ngx-wig>
  <ngx-wig
          [(ngModel)]="post.release.enhancements"
          formControlName="enhancementDescription"></ngx-wig>
  <ngx-wig
          [(ngModel)]="post.release.bus"
          formControlName="enhancementDescription"></ngx-wig>

это фрагмент моего редактора тестовых файлов-Dialog.spec.ts

 // I have created mock data in this file

  it('should create', () => {
    const fixture = TestBed.createComponent(EditorDialogComponent);
    const component = fixture.componentInstance;
    component.post = testPost;
    fixture.detectChanges();
    expect(component).toBeTruthy();
  });

Я загрузил полный код этих компонентов здесь, поэтому буду очень признателен, если кто-нибудь сможет взглянуть на него и помочь мне исправить его, даже если вы не сможете запустить проект.

https://stackblitz.com/edit/angular-ivy-dv2dha?file=editor-dialog.html

Комментарии:

1. Вы не должны использовать ngModel и FormControl в одном элементе. либо вы используете ngModel, либо FormControl.

2. Вы пробовали отлаживать свой код тест шаг за шагом? В какой строке выводится ошибка? Как выглядит испытательный пост?

3. возможно, тестовый пост не содержит ожидаемых данных

Ответ №1:

{ укажите: MAT_DIALOG_DATA, значение использования: {} } Здесь вы должны пройти тестовый пост

Ответ №2:

Добавьте условие ngIf перед использованием соответствующих переменных, чтобы убедиться, что переменная доступна.

например,

 <ngx-wig *ngIf="post amp;amp; post.release"
          [(ngModel)]="post.release.features"></ngx-wig>

Ответ №3:

Внесите следующие изменения, и вы готовы к работе:

 <ngx-wig
          [(ngModel)]="post?.release?.features"
          formControlName="enhancementDescription">
</ngx-wig>
<ngx-wig
          [(ngModel)]="post?.release?.enhancements"
          formControlName="enhancementDescription">
</ngx-wig>
<ngx-wig
          [(ngModel)]="post?.release?.bus"
          formControlName="enhancementDescription">
</ngx
Метки: