为什么Jasmine会抛出很多错误:测试模块已经实例化了，还不能配置测试模块？

Question

我很困惑。我在学习Angular，我在为我的服务类编写单元测试，完全没有问题。今天我准备了第一个组件规范文件，Jasmine疯了。使用此代码时：

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [FooterComponent],
  });
  fixture = TestBed.createComponent(FooterComponent);
  component = fixture.componentInstance;
  span = fixture.nativeElement.querySelector('span');
});

Jasmine在146次测试中的31次测试中给了我一个错误：

错误：当测试模块已经实例化时，无法配置测试模块。确保在R3TestBed.configureTestModule之前没有使用注入。

所有的错误都在服务文件的测试中，组件测试没有一个错误。我猜这可能与创建fixture或组件的实例有关。但我不知道该怎么做。当我注释所有夹具行时，如下图所示，没有一个错误：

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [FooterComponent],
  });
  // fixture = TestBed.createComponent(FooterComponent);
  // component = fixture.componentInstance;
  // span = fixture.nativeElement.querySelector('span');
});

我已经试过了，没有效果:https://stackoverflow.com/a/39410211/12603542

此外，我无法在SO问题中处理类似的案例。这是我的服务测试文件的示例：

beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [
        {
          provide: HTTP_INTERCEPTORS,
          useClass: JwtInterceptor,
          multi: true,
        },
        { provide: AuthService, useValue: authMock },
      ],
    });

    injector = getTestBed();
    httpMock = injector.inject(HttpTestingController);
  });

  afterEach(() => {
    httpMock.verify();
  });

以及完全错误的示例：

错误：当测试模块已经实例化时，无法配置测试模块。确保在R3TestBed.configureTestModule之前没有使用注入。在TestBedRender3.assertNotInstantated(http://localhost:9876/karma_webpack/node_modules/@angular/core/ivy_ngcc/fesm2015/测试。js:2026:1）在TestBedRender3.configureTestModule(http://localhost:9876/karma_webpack/node_modules/@angular/core/ivy_ngcc/fesm2015/测试。js:1932:1）。配置测试模块(http://localhost:9876/karma_webpack/node_modules/@angular/core/ivy_ngcc/fesm2015/测试。js:1822:1）。(http://localhost:9876/karma_webpack/src/app/app-core/_helpers/jwt.interceptor.spec.ts:26:13）。调用(http://localhost:9876/karma_webpack/node_modules/zone.js/dist/zone-常绿植物。js:364:1）。onInvoke（调用）(http://localhost:9876/karma_webpack/node_modules/zone.js/dist/zone-测试。js:292:1）。调用(http://localhost:9876/karma_webpack/node_modules/zone.js/dist/zone-常绿植物。js:363:1）。运行(http://localhost:9876/karma_webpack/node_modules/zone.js/dist/zone-常绿植物。js:123:1）在runInTestZone(http://localhost:9876/karma_webpack/node_modules/zone.js/dist/zone-测试。js:545:1）。(http://localhost:9876/karma_webpack/node_modules/zone.js/dist/zone-testing.js:560:1）

Answer 1

这个问题非常愚蠢。它缺少描述和编译组件：

describe('FooterComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [FooterComponent],
    }).compileComponents();

    fixture = TestBed.createComponent(FooterComponent);
    component = fixture.componentInstance;
    span = fixture.nativeElement.querySelector('span');
  });
});