angular - 未捕获的类型错误 : Cannot read property 'teams' of undefined thrown - Karma

标签 angular unit-testing jasmine karma-jasmine

我在运行 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", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~1.7.1", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.0", "karma-jasmine": "~1.1.1", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "^5.4.2", "ts-node": "~5.0.1", "tslint": "~5.9.1", "typescript": "~2.7.2"

这就是 Karma 打开时我看到的全部 enter image description here

我的命令行 enter image description here

家长测试文件

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();
  });
});

child 测试文件

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();
  });
});

最佳答案

如果您甚至不想测试 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(); 
   }); 

关于angular - 未捕获的类型错误 : Cannot read property 'teams' of undefined thrown - Karma,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56351507/

相关文章:

angular - 如何对作为 viewchild 的函数进行单元测试

angular - *ngFor - 当数组通过 ngrx 更新时更新 dom

jasmine - 是否可以使用 karma 运行并行测试

javascript - Angular 错误: Webpack has been initialised using a configuration object that does not match the API schem

javascript - React-testing-library:因输入而改变

javascript - 如何在 Jest 测试之间恢复模拟实现?

java - Java 中用于转换具有相同字段的两个对象的 Guava 函数的单元测试

Angularjs - 在 Protractor e2e 测试中模拟触摸事件

angular - 加载数据后设置 react 形式(异步)-Angular 5

css - 填充外部导入的 svg 文件