尝试运行“ng test”时没有提供 MatSnackBar 错误答案

【问题标题】：No provider for MatSnackBar error when trying to run "ng test"尝试运行“ng test”时没有提供 MatSnackBar 错误
【发布时间】：2018-06-08 20:58:03
【问题描述】：

所以我试图在我的 Angular 4 Angular CLI 上运行“ng test”。我遇到了很多问题，例如如果测试失败，UI 不会加载任何有用的消息，但幸运的是控制台可以正常工作。无论如何，这个错误是说我没有在规范中给 MatSnackBar 提供者，但是当我这样做时，我得到一个不同的错误。

Chrome 66.0.3359 (Linux 0.0.0) BranchNameCellComponent should create FAILED
    Error: No provider for MatSnackBar!

当我将 MatSnackBar 作为导入时出错

Chrome 66.0.3359 (Linux 0.0.0) BranchNameCellComponent should create FAILED
    Failed: Unexpected value 'MatSnackBar' imported by the module 'DynamicTestModule'. Please add a @NgModule annotation.

在我的组件代码中，我正在导入 MatSnackBar 并在构造函数中调用它。它工作正常。

import { MatSnackBar } from '@angular/material';
....
constructor(private httpClient: HttpClient, private fb: FormBuilder, public snackBar: MatSnackBar) { }

但在规范中，我尝试这样做无济于事。

import { MatSnackBar } from '@angular/material';
....
describe('BranchNameCellComponent', () => {
  let component: BranchNameCellComponent;
  let fixture: ComponentFixture<BranchNameCellComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ BranchNameCellComponent ],
      imports: [ HttpClientTestingModule, ReactiveFormsModule, MatSnackBar ],
      schemas: [ NO_ERRORS_SCHEMA ]
    })
    .compileComponents();
  }));

  it('should create', () => {
    fixture = TestBed.createComponent(BranchNameCellComponent);
    component = fixture.componentInstance;
    expect(component).toBeTruthy();
  });
});

按照 Diego 的建议导入模块后，我现在在同一个测试中遇到超时错误

08 06 2018 16:14:52.839:WARN [Chrome 66.0.3359 (Linux 0.0.0)]: Disconnected (1 times), because no message in 10000 ms.
Chrome 66.0.3359 (Linux 0.0.0) ERROR
Chrome 66.0.3359 (Linux 0.0.0) ERROR
  Disconnected, because no message in 10000 ms.
Chrome 66.0.3359 (Linux 0.0.0): Executed 16 of 56 DISCONNECTED (11.204 secs / 1.241 secs)
Chrome 66.0.3359 (Linux 0.0.0) ERROR
Chrome 66.0.3359 (Linux 0.0.0): Executed 16 of 56 DISCONNECTED (11.204 secs / 1.241 secs)

【问题讨论】：

在开始之前请阅读docs。

标签： angular testing angular-material angular-cli

【解决方案1】：

您应该导入模块而不是组件。

import { MatSnackBar, MatSnackBarModule } from '@angular/material';
....
describe('BranchNameCellComponent', () => {
  let component: BranchNameCellComponent;
  let fixture: ComponentFixture<BranchNameCellComponent>;
    
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ BranchNameCellComponent ],
      imports: [ HttpClientTestingModule, ReactiveFormsModule, MatSnackBarModule ],
      schemas: [ NO_ERRORS_SCHEMA ]
    }).compileComponents();
  }));
    
  it('should create', () => {
    fixture = TestBed.createComponent(BranchNameCellComponent);
    component = fixture.componentInstance;
    expect(component).toBeTruthy();
  });
});

对于与超时相关的问题，请尝试将其添加到您的 karma 配置文件中：

captureTimeout: 210000,
browserDisconnectTolerance: 3, 
browserDisconnectTimeout : 210000,
browserNoActivityTimeout : 210000,

【讨论】：

哇，谢谢。我有这么小的疏忽。但是我仍然遇到错误，这次没有太多要发生的事情。它说它超时了，但测试 16 与出现错误的测试相同，所以我相信它仍然与它有关。有任何想法吗？我将在上面发布新错误
我已经更新了答案以涵盖第二个问题，让我们看看是否也有效。

【解决方案2】：

这件事最近发生在我身上，我决定这样::

包含文件 aap.module.ts

import { MatSnackBarModule } from '@angular/material/snack-bar';
...
...
imports: [
    ...
    MatSnackBarModule
  ]
...

关于文件组件或服务：

import { MatSnackBar } from '@angular/material/snack-bar';
...
...
constructor(private snackBar: MatSnackBar) { }
...

【讨论】：

我忘记导入了！我猜我还是 A 的菜鸟！

【解决方案3】：

当我在我的 Angular 应用程序中导航到某个延迟加载的模块时，我遇到了这个错误。该模块正在导入MatSnackBarModule，但我还需要在app.module.ts 文件中导入MatSnackBarModule

【讨论】：

正是我的用例 Awais.. 感谢您的提示 :-)