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

---

如果您正在注入(inject) AnimationBuilder:

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

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

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