Karma Test: the synthetic property @transitionMessages. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application

Question

TEST FILE

import { async, ComponentFixture, TestBed } from 
'@angular/core/testing';

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

import { ManagePageComponent } from './manage-page.component';
import { MatIconModule } from '@angular/material/icon';
import { RouterTestingModule } from '@angular/router/testing';
import {MatTableModule} from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { HttpClientModule } from '@angular/common/http';

describe('ManagePageComponent', () => {
  let component: ManagePageComponent;
  let fixture: ComponentFixture<ManagePageComponent>;

 beforeEach(async(() => {

    TestBed.configureTestingModule({
      declarations: [ ManagePageComponent ],
      imports: [
        BrowserAnimationsModule,
        RouterTestingModule,
        MatIconModule,
        MatTableModule,
        MatTabsModule,
        HttpClientModule,
      ],
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ManagePageComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

component file

import { Component, OnInit } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { Router, ActivatedRoute } from '@angular/router';


@Component({
  selector: 'app-manage-page',
  templateUrl: './manage-page.component.html',
  styleUrls: ['./manage-page.component.scss'],
})
export class ManagePageComponent implements OnInit {
  goEdit() {
    this.router.navigate(['manage', 'edit']);
  }
  constructor(private router: Router) { }

  ngOnInit() {
  }

}

HTML

<div class="jumbotron">
  <h1>Creat and Edit</h1>
  <p>What inspires you today...</p>
  <div class="add-button">
    <div class="sub-button tl" (click)="goEdit()">
      <mat-icon>work</mat-icon>
    </div>
    <div class="sub-button tr" (click)="goEdit()">
      <mat-icon>description</mat-icon>
    </div>
    <div class="sub-button bl" (click)="goEdit()">
      <mat-icon>description</mat-icon>
    </div>
    <div class="sub-button br" (click)="goEdit()">
      <mat-icon>invert_colors</mat-icon>
    </div>
  </div>
</div>
 <div class="container">
  <div class="row">
    <div class="col-md-12">
      <router-outlet></router-outlet>
    </div>
  </div>
</div> 

the app works fine, this error ONLY happens in Karma test. I've also imported the BrowserAnimationsModule in the app.module.ts file in the imports: [] array. None of the solutions on the internet works for me... Desperate...

I use angular cli and "@angular/animations": "^6.1.3", is already in the package.json

Answer 1

In my case, It worked by importing NoopAnimationsModule in the spec file.

Do replace BrowserAnimationsModule by NoopAnimationsModule.

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

Inside your beforeEach function, change like below,

 imports: [
        NoopAnimationsModule,
        RouterTestingModule,
        MatIconModule,
        MatTableModule,
        MatTabsModule,
        HttpClientModule,
      ],