javascript - karma 测试 : the synthetic property @transitionMessages. 请在您的申请中包含 "BrowserAnimationsModule"或 "NoopAnimationsModule"

Question

测试文件

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

组件文件

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> 

该应用程序运行良好，此错误仅发生在 Karma 测试中。我还在 imports: [] 数组中在 app.module.ts 文件中导入了 BrowserAnimationsModule。互联网上的解决方案都不适合我...绝望...

我使用 angular cli 和 "@angular/animations": "^6.1.3", 已经在 package.json 中

Answer 1

在我的例子中，它通过在规范文件中导入 NoopAnimationsModule 来工作。

请用 NoopAnimationsModule 替换 BrowserAnimationsModule。

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

在你的 beforeEach 函数中，像下面这样改变，

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