Angular单元测试因在动画中调用query()而失败

Question

我有一个包含登录表单和注册表单的entry组件(每一个都是它们自己的组件)。entry组件包含一个变量，该变量声明是显示登录组件还是注册组件，并使用模板中的元素进行切换。

当切换此变量时，包装子组件的容器会随着登录=>寄存器的更改而显示动画(反之亦然)。

当我单击此元素切换到单元测试中的注册表单时，测试失败，因为我需要在单击切换后调用fixture.detectChanges()，以便随后与注册表单实例进行交互。对fixture.detectChanges()的调用会导致以下错误。

Error: Unable to process animations due to the following failed trigger transitions @entryModeTransition has failed due to: 

- `query("app-login-form > form")` returned zero elements. (Use `query("app-login-form > form", { optional: true })` if you wish to allow this.)

在beforeEach()块中还有一个fixture.detectChanges()调用。

我已经确保在测试设置中包含NoopAnimationsModule，但是这似乎不会阻止动画的触发(我以为NoopAnimationsModule会这样做)。

我可以简单地将{ optional: true }选项添加到动画定义中的query()调用中，但是我不喜欢在动画中添加此选项，因为它们只是为了防止测试失败。

如果相关，则使用ng-mocks模拟登录和注册表单组件。

有什么方法可以阻止动画在单元测试中运行吗？

Answer 1

如果其他人遇到这个问题，我最终通过在规范设置中构建组件时覆盖动画来绕过它。

这样，我仍然可以模拟子组件，就像我在整个现有测试中所做的那样，并且也不需要调整动画定义。

通过将animations元选项设置为包含与导致错误的动画同名的空触发器定义的数组，可以完成覆盖。

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [EntryComponent, MockComponents(LoginFormComponent, RegisterFormComponent)],
      imports: [NoopAnimationsModule, ...other imports omitted],
      providers: [...providers omitted]
    })
      .overrideComponent(EntryComponent, {
        set: {
          animations: [trigger('entryModeTransition', [])]
        }
      })
      .compileComponents();
  }));

如果许多测试需要这个变通方法，空触发器的创建甚至可以移到实用程序函数中，这可能会整理覆盖：

.overrideComponent(EntryComponent, {
  set: {
    animations: mockAnimations(['entryFormTransition, 'someOtherTransition'])
  }
})