No provider for MatSnackBar error when trying to run "ng test"

Question

So I'm trying to run "ng test" on my Angular 4 Angular CLI. I'm having many problems such as the UI not loading any helpful message if a test fails, but fortunately the console works. Anyways, this error is occuring saying I did not give MatSnackBar a provider in the spec, but when I do, I get a different error.

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

Error when I include MatSnackBar as an import

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.

In my component code, I'm importing MatSnackBar and calling it in the constructor. It works fine.

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

But in the spec, I try this to no avail.

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

After importing the module like Diego suggested, I now get a timeout error on that same test

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)

Solution 1

You should import the module instead of the component.

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

For the issue related to the timeout, try adding this to your karma config file:

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

Solution 2

I was facing this error when in my angular app, I was navigating to some module which was lazy loaded. This module was importing MatSnackBarModule but I needed to import MatSnackBarModule in app.module.ts file as well

Solution 3

This has happened to me recently and I decided like this::

Include file aap.module.ts

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

On file component or service:

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