Angular 测试：无法读取未定义的属性 'images'

Question

我正在尝试运行对名为 AlbumInfoComponent 的 Angular 组件进行业力测试。在这个组件中，我有一个名为 getStyles() 的函数，它执行以下操作：

  getStyles() {
    return {
      "background-image":'url('+this.data.images[1].url+')'
    }
  }

它使用一个名为 data 的变量初始化为：private user: {} = {}

我有一个测试运行只是默认的 should create 测试而已。尽管出于某种原因，当运行进行测试时，我得到 TypeError: Cannot read property 'images' of undefined。我最初的想法是，由于 Angular 不知道数据中有一个名为 images 的值，因此它会失败。因此，我尝试将组件设置为模拟组件数据。这是我的测试代码：

describe('AlbumInfoComponent', () => {
  let component: AlbumInfoComponent;
  let fixture: ComponentFixture<AlbumInfoComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ LandingComponent, FaIconComponent, HomeComponent, LoginComponent, AlbumInfoComponent, RecentReleasesComponent, QueueComponent, SearchComponent, TitleComponent, UserComponent, SearchBarComponent, RecentReleaseComponent, YourQueueComponent    ],
      imports: [FormsModule, HttpClientTestingModule,         RouterTestingModule.withRoutes([]), MatSnackBarModule    ],
      providers: [InfoService, HttpClient, TokenService ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AlbumInfoComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
  it('should create', () => {    
    component.data = {
      "images": [
      {
        "height": 640,
        "url": "https://i.scdn.co/image/ab67616d0000b273626d2ce1fb80955645d4d787",
        "width": 640
      },
      {
        "height": 300,
        "url": "https://i.scdn.co/image/ab67616d00001e02626d2ce1fb80955645d4d787",
        "width": 300
      },
      {
        "height": 64,
        "url": "https://i.scdn.co/image/ab67616d00004851626d2ce1fb80955645d4d787",
        "width": 64
      }
      ]
    }
    expect(component).toBeTruthy();
  });
});

有没有办法强制数据变量等于模拟数据来修复错误？

Answer 1

这个答案有效：https://github.com/ngrx/platform/issues/1546#issuecomment-461945741

我们需要在每次测试后销毁夹具。这样做：

  afterEach(() => {
    fixture.destroy();
  });

Angular 测试：无法读取未定义的属性 'images'

Angular Testing: Cannot read property 'images' of undefined

testing

unit-testing

jasmine

karma-runner

angular

Angular 测试：无法读取未定义的 属性 'images'

Angular Testing: Cannot read property 'images' of undefined

testing

unit-testing

jasmine

karma-runner

angular

Angular 测试：无法读取未定义的属性 'images'