业力测试：合成属性@transitionMessages。请在您的应用程序中包含“BrowserAnimationsModule”或“NoopAnimationsModule”

Posted 2023-03-16

【中文标题】业力测试：合成属性@transitionMessages。请在您的应用程序中包含“BrowserAnimationsModule”或“NoopAnimationsModule”

【英文标题】：Karma Test: the synthetic property @transitionMessages. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application

【发布时间】：2019-01-25 08:54:18

【问题描述】：

测试文件

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 测试中发生。 我还在 import: [] 数组的 app.module.ts 文件中导入了 BrowserAnimationsModule。 互联网上的解决方案都不适合我...绝望...

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

【参考方案1】：

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

用 NoopAnimationsModule 替换 BrowserAnimationsModule。

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

在你的 beforeEach 函数中，改变如下，

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

【讨论】：

我仍然遇到同样的错误，即使在导入模块中进行了此替换之后...