Angular 5-ng测试-请包括“ BrowserAnimationsModule”或“ NoopAnimationsModule”

Question

我的应用程序中有一些浏览器动画，它们运行正常，没有错误。ng test即使我BrowserAnimationsModule在app.module.ts文件中包含，我运行时也会遇到此错误。我正在使用动画HeaderComponent

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { registerLocaleData } from '@angular/common';
import localeEs from '@angular/common/locales/es';

registerLocaleData(localeEs, 'es-us')

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我已经尝试过此解决方案，但仍然遇到相同的问题。

Answer 1

您只需要模拟动画

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        NoopAnimationsModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));
});

如果要注入AnimationBuilder：

export class MyComponent implements OnInit {
    constructor(
        private builder: AnimationBuilder,
        ...
    ) { }

您需要像这样在规范文件中提供它：

TestBed.configureTestingModule({
      imports: [
        NoopAnimationsModule,
      ],
      declarations: ...,
      providers: [
        {
          provide: ...,
          useClass: ...
        },
          NoopAnimationsModule,
        {
          provide: ...,
          useValue: ...,
        }
      ]
    })
    .compileComponents();
  }));