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 { }

我试过this solution但仍然有同样的问题..

Answer 1

你只需要模拟动画

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

---

如果您正在注入AnimationBuilder：

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

你需要在你的spec文件中提供它，如下所示：

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