添加新测试后单元测试失败

Question

我目前正在开发一个 Ionic (v3) 应用程序，我们有几个测试来测试服务、页面和组件。

在我为组件添加新测试之前，一切正常。

两个测试单独运行良好（如果以 fdescribe 开头，或者如果我将其中一个注释掉）。

测试如下所示：

验证-key.spec.ts

describe('Component: VerifyKey', () => {

  let component: VerifyKeyComponent
  let fixture: ComponentFixture<VerifyKeyComponent>

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [VerifyKeyComponent],
      imports: [
        IonicModule.forRoot(VerifyKeyComponent)
      ]
    })

    // create component and test fixture
    fixture = TestBed.createComponent(VerifyKeyComponent)

    // get test component from the fixture
    component = fixture.componentInstance
  })
  ...
})

wallet-select-coins.spec.ts

describe('Wallet-Select-Coin Component', () => {

  let fixture: ComponentFixture<WalletSelectCoinsPage>
  let component: WalletSelectCoinsPage

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [WalletSelectCoinsPage],
      imports: [
        IonicModule.forRoot(WalletSelectCoinsPage),
        ComponentsModule,
        IonicStorageModule.forRoot({
          name: '__airgap_storage',
          driverOrder: ['localstorage']
        })
      ],
      providers: [
        SecretsProvider,
        {
          provide: SecureStorageService,
          useFactory: SecureStorageFactory,
          deps: [Platform]
        },
        { provide: NavController, useClass: NavControllerMock },
        { provide: NavParams, useClass: NavParamsMock },
        { provide: StatusBar, useClass: StatusBarMock },
        { provide: SplashScreen, useClass: SplashScreenMock },
        { provide: Platform, useClass: PlatformMock }
      ]
    })
  }))

  beforeEach(() => {
    fixture = TestBed.createComponent(WalletSelectCoinsPage)
    component = fixture.componentInstance
    fixture.detectChanges()
  })

  it('should not show hd-wallet dropdown if currency does not support it', () => {
    let el = fixture.debugElement.nativeElement
    let ethereumRadio = el.querySelector('#eth')

    // click on ethereum
    ethereumRadio.click()
    fixture.detectChanges()
    console.log(component.selectedProtocol)
    expect(component.selectedProtocol).toBeDefined() // This fails
    expect(component.selectedProtocol.identifier).toEqual('eth')

    // eth should not show hd wallets
    let hdWalletSelector = el.querySelector('#wallet-type-selector')
    expect(hdWalletSelector).toBeFalsy()
  })

})

如果两个测试都启用，第二个测试在expect(component.selectedProtocol).toBeDefined() 行失败，错误为Expected undefined to be defined.

如果我从第一个文件中注释掉 fixture = TestBed.createComponent(VerifyKeyComponent) 行，那么第二个测试运行没有任何问题。

我的第一个想法是 TestBed 在第一次测试中以某种方式进行了修改。所以我尝试在第一次测试后添加TestBed.resetTestingModule()，但这并没有改变任何东西。

任何帮助将不胜感激。

Answer 1

在编写测试时，最好的做法是在每次测试后清理所有内容，以便所有测试都可以随机顺序运行，而不会影响任何其他测试。

我建议在每个测试中引入afterEach() 或afterAll()，以清除生成的任何数据。因为大多数测试环境在相同的上下文中运行所有测试。

您为什么希望您的TestBed.configureTestingModule 被创建为 async()？您的测试将运行，但异步部分可能永远不会在 it(.. 之前被调用

希望这些想法会有所帮助:)