时间戳

首页 > 解决方案 > 为什么 Jasmine 会抛出很多错误：无法在测试模块已经实例化时配置测试模块？

angular - 为什么 Jasmine 会抛出很多错误：无法在测试模块已经实例化时配置测试模块？

问题描述

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

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

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

错误：当测试模块已经被实例化时，无法配置测试模块。确保您之前没有使用inject过 R3TestBed.configureTestingModule.

而且所有的错误都在服务文件的测试中，没有一个是针对组件测试的。我猜它可能与创建fixtureor的实例有关component。但我不知道如何。当我评论所有夹具行时，如下所示，没有一个错误：

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

以及完整错误的示例：

错误：当测试模块已经被实例化时，无法配置测试模块。确保您之前没有使用inject过 R3TestBed.configureTestingModule. 在 TestBedRender3.assertNotInstantiated (http://localhost:9876/ karma_webpack /node_modules/@angular/core/ ivy_ngcc /fesm2015/testing.js:2026:1) 在 TestBedRender3.configureTestingModule (http://localhost:9876/ karma_webpack /node_modules /@angular/core/ ivy_ngcc /fesm2015/testing.js:1932:1) 在 Function.configureTestingModule (http://localhost:9876/ karma_webpack /node_modules/@angular/core/ ivy_ngcc /fesm2015/testing.js:1822: 1）在用户上下文。(http://localhost:9876/ karma_webpack/src/app/app-core/_helpers/jwt.interceptor.spec.ts:26:13) 在 ZoneDelegate.invoke (http://localhost:9876/karma_webpack/ node_modules /zone.js/dist/zone -evergreen. js:364:1) 在 ProxyZoneSpec.push.QpwO.ProxyZoneSpec.onInvoke (http://localhost:9876/ karma_webpack /node_modules/zone.js/dist/zone-testing.js:292:1) 在 ZoneDelegate.invoke ( http://localhost:9876/ karma_webpack /node_modules/zone.js/dist/zone-evergreen.js:363:1) 在 Zone.run (http://localhost:9876/ karma_webpack /node_modules/zone.js/dist /zone-evergreen.js:123:1) 在 userContext 的 runInTestZone (http://localhost:9876/ karma_webpack /node_modules/zone.js/dist/zone-testing.js:545:1)。(http://localhost:9876/ karma_webpack/node_modules/zone.js/dist/zone-testing.js:560:1)

标签： angularunit-testingjasmine

解决方案

这个问题非常愚蠢。它不见了describe，并且compileComponents：

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

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

推荐阅读