未捕获的类型错误：无法读取未定义的属性“团队”抛出 - 业力

Posted 2023-03-24

【中文标题】未捕获的类型错误：无法读取未定义的属性“团队”抛出 - 业力

【英文标题】：Uncaught TypeError: Cannot read property 'teams' of undefined thrown - Karma

【发布时间】：2019-10-14 12:44:54

【问题描述】：

我在运行ng test 时遇到了这个问题。它编译良好，ng build --prod 运行良好。我什至没有看到那些具有该名称的变量只是 Observables，但变量前面有一个 $。

问题已更新

"@types/jasmine": "2.8.9", "@types/jasminewd2": "~2.0.3", "@types/node": "~8.9.4", "codelyzer": "~4.2.1", “茉莉花核”：“~2.99.1”， “茉莉花规格报告者”：“〜4.2.1”， "业力": "~1.7.1", "karma-chrome-launcher": "~2.2.0", “karma-coverage-istanbul-reporter”：“~2.0.0”， “业力茉莉花”：“〜1.1.1”， “karma-jasmine-html-reporter”：“^0.2.2”， "量角器": "^5.4.2", "ts-node": "~5.0.1", "tslint": "~5.9.1", “打字稿”：“~2.7.2”

这就是我在 Karma 打开时看到的全部内容

我的命令行

家长测试文件

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

  beforeEach(async(() => 
    TestBed.configureTestingModule(
      imports: [
        ReactiveFormsModule,
        HttpClientModule,
        RouterTestingModule,
        StoreModule.forRoot()
      ],
      declarations: [MembersComponent, ModalComponent],
      providers: [ provide: Store, useClass: StoreStub ]
    ).compileComponents();
  ));

  beforeEach(() => 
    fixture = TestBed.createComponent(MembersComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  );

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

儿童测试文件

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

  beforeEach(async(() => 
    TestBed.configureTestingModule(
      declarations: [ModalComponent],
      imports: [FormsModule, ReactiveFormsModule, StoreModule.forRoot()],
      providers: [Store]
    ).compileComponents();
  ));

  beforeEach(() => 
    fixture = TestBed.createComponent(ModalComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  );

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

【问题讨论】：

this.store 未定义。通常，服务在测试中被模拟。你的模拟是什么样子的？

@Gosha_Fighten 我真的不知道该怎么做。我是 Karma 的新手

分享你的 Karma 测试代码。

@Gosha_Fighten 完成

你正在使用 RxJS BehaviorSubject 模拟 NgRx Store。 BehaviorSubject 不提供相同的 API。它没有像dispatch 和select 这样的方法。请参阅其documentation。如Testing 文章中所述，使用来自 NgRx 的 Store mocks。

【参考方案1】：

如果您甚至不想测试 store，请尝试以下操作：

import  of  from 'rxjs';

class StoreStub 
    select(val: any) 
        if (val === 'whatever action you have defined for RacingSelectors.selectMembers') 
            return of<Member[]>([
                , // create dummy member objects
            ]);
         else if (val === 'whatever action you have defined for RacingSelectors.selectTeams') 
            return of<Team[]>([
                 firstName: '' ,
                 lastName: '' ,
                 jobTitle: '' ,
                 team: '' ,
                 status: '' , // create dummy member objects
            ]);
        
    
    dispatch() 

在spec 文件中：

    TestBed.configureTestingModule(
      imports: [
        ReactiveFormsModule,
        HttpClientModule,
        RouterTestingModule,
        StoreModule.forRoot()
      ],
      declarations: [MembersComponent, ModalComponent],
      providers: [ provide: Store, useClass: StoreStub]
    ).compileComponents();
  ));

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

【讨论】：

嗨！感谢您花时间帮助我。似乎问题出在“团队”上

@PatricioVargas 我将它创建为一个成员数组，因为$members: Observable<Member[]>; 具有Member[] 类型。我认为dispatch of undefined 错误一定已经解决了。我看不到任何与teams 相关的代码。该代码似乎给出了can't read teams of undefined。是 RacingActions 类里面的东西吗？

对不起，我在问题中意外删除了 ``` $teams: Observable;``` 行。我又加了一次。我注意到调度问题已经消失了。唯一一直出现两次的是Uncaught TypeError: Cannot read property 'teams' of undefined thrown我已经更新了我的问题

@PatricioVargas ：在您提供的代码中，我仍然看不到 .teams。您可以添加整个错误的屏幕截图吗？它显示出现此错误的行号。您提供的代码肯定不会发生这种情况

是的！我什至在 html 页面中都没有看到该组件中的 .teams。我认为这是因为.teams 是我所在州的一部分。我的状态如下members: Member[], teams: Team[], selectedMember: Member