Angular 5 - ng test - Please include either "BrowserAnimationsModule" or "NoopAnimationsModule"

Question

I have some browser animations in my application that are working fine with no errors. When I run ng test i'm getting this error even though I'm including the BrowserAnimationsModule in my app.module.ts file. I'm using animations within my 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 { }

I've tried this solution but still having the same issue..

Answer 1

you just need to mock animation

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

---

If you are injecting the AnimationBuilder:

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

You'll need to provide it in your spec file like this:

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

Answer 2

For me in Angular 12, I believe this should help in earlier versions too, I followed instructions from this github issues post: https://github.com/angular/angular/issues/15713

I have a test.ts file and I added the NoopAnimationsModule to the initTestEnvironment. On top of what the other posts suggested. It wasn't until I updated the test.ts file did the error go away

test.ts file

// This file is required by karma.conf.js and loads recursively all the .spec and framework files

import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';

declare const require: any;

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
  [BrowserDynamicTestingModule, NoopAnimationsModule],
  platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);

Answer 3

only import the NoopAnimationsModule in the imports array of your spec file

imports: [...., NoopAnimationsModule],