40

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)
1

3 Answers 3

56

You should import the module instead of the component.

import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
....
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,
3
  • Wow thank you. Such a small oversight I had. but I'm still getting an error, just not much to go off this time. It says it timed out, but test 16 is the same one that was having the error so I believe it still has something to do with it. Any ideas? I'll post the new error above
    – Sarah
    Jun 8, 2018 at 21:33
  • I have updated the answer to cover the second issue too, let's see if that works too.
    – dlcardozo
    Jun 8, 2018 at 22:30
  • I had an error on importing on Angular 13, fixed using import { MatSnackBarModule } from '@angular/material/snack-bar'; Apr 4, 2022 at 22:38
22

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) { }
...
1
  • I forgot the import! I'm still a noob in A I guess!
    – Alaa Jabre
    Dec 22, 2021 at 15:27
9

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

2
  • 1
    Exactly my use case Awais.. thanks for the tip :-) Dec 6, 2021 at 23:05
  • 1
    but why, It solves the issue but I dont want to import in appmodule. I have imported it abc module and in abc module one lazy loaded module xyz is using snacbar, even though i have added in import of parent module(abc), it shows error. Feb 18 at 18:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.