Karma Jasmine - 为什么即使没有测试用例，我的测试用例也会随机失败？

Question

这是我的 oninit 类，我不应该更改它。

  ngOnInit(): void {
        this.setCustomizedValues();
        this.sub = PubSub.subscribe('highlightEntity', (subId, entityIdentifier: string) => {
          document.querySelector(entityIdentifier).classList.add('highlight');
    
          setTimeout(() => {
            document.querySelector(entityIdentifier).classList.remove('highlight');
          }, 2000);
    
        });
      }

这是最小的测试设置

describe('aComponent', () => {

    
  let httpCallerServiceStub = jasmine.createSpyObj('httpCallerServiceStub', ['get']);

  let fixture: ComponentFixture<aComponent>;
  let componentInstance: aComponent;
  localStorage.clear();
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [aComponent],
      providers: [
        {
          provide: HttpCallerService,
          useValue: httpCallerServiceStub
        }],
      imports: [CommonModule, CmcSpinnerModule, NgbModule],
    }).compileComponents();

    fixture = TestBed.createComponent(aComponent);
    componentInstance = fixture.componentRef.instance;
    fixture.autoDetectChanges();
  });

 describe('ngOnInit method', () => {
    beforeEach(() => {
      fixture.componentInstance.customized = {};
    });

    it('should initialize with minimum input', () => {
      // Triggers ngOnInit
      fixture.detectChanges();
      expect(fixture.componentInstance.customized).toEqual({});
    });
  });

问题是测试随机失败，错误是 classlist not found of null

"message": "An error was thrown in afterAll\nTypeError: Cannot read property 'classList' of null\n    at <Jasmine>\n 
   at webpack:///components/path/aComponent.ts:35:53

第 35 行引用 oninit 函数中的这一行

   setTimeout(() => {
                document.querySelector(entityIdentifier).classList.remove('highlight');
              }, 2000);

这里的问题很少

1. 我尝试将 tick(2000) 和 fake asysnc 放在一个简单的 ngoni 测试中，但它仍然给我同样的随机错误（如 this answer 所建议的那样）

2. 我的测试台配置是否缺少某些内容？因为即使我注释掉 oninit 测试并检查一些随机函数，即使没有fixture.detectChanges()，也会发生同样的随机错误。

3. 如果我使用 fdescibe 运行测试，所有测试每次都会通过。仅当我从 fdescribe 中删除 f 并同时运行其他组件的所有测试时才会出现此问题。

请指导我，自从过去 4 天以来，我一直被困在这里。

Answer 1

继续进行来自 cmets 的讨论：

我建议使用模拟而不是实际尝试使aComponent 在其他单元测试中工作。如果它有自己的依赖项，那么每次你用其他一些依赖项或初始化代码扩展它时都会抛出这样的错误。如果您不打算在其父组件中测试该功能，那么模拟应该会这样做。

同时你会摆脱任何蜱虫等等......

@Component({
  selector: 'a-component', //make sure the selector is same as in the real component
  template: '<p>Mock A Component</p>'
})
class MockAComponent {}

beforeEach(() => {
  TestBed.configureTestingModule({
      declarations: [
        ParentComponent,
        MockAComponent ,
      ],
      // ...
  });
});

或者一个简单的解决方案是安装ng-mocks，然后就不需要单独创建了。

beforeEach(() => {
  TestBed.configureTestingModule({
      declarations: [
        ParentComponent,
        MockComponent(AComponent),
      ],
      // ...
  });
});

更多信息在这里：Mocking Child Components - Angular 2