How to fix No provider for ChangeDetectorRef! in Karma-Jasmine Testing

Question

StaticInjectorError(DynamicTestModule)[MatTable -> ChangeDetectorRef]: StaticInjectorError(Platform: core)[MatTable -> ChangeDetectorRef]: NullInjectorError: No provider for ChangeDetectorRef!

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { MessagesComponent } from './messages.component';
import { NgModule,CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA} from '@angular/core';
import { MatTableModule } from '../../../MessageUtility/node_modules/@angular/material';
import { HttpClientModule } from '@angular/common/http';
import { RouterTestingModule  } from '@angular/router/testing';

describe('MessagesComponent', () => {
  let component: MessagesComponent;
  let fixture: ComponentFixture<MessagesComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ MessagesComponent ],
    imports:[HttpClientModule,RouterTestingModule,MatTableModule, ],
      schemas: [NO_ERRORS_SCHEMA,NO_ERRORS_SCHEMA]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MessagesComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Can you add some code – Chellappan வ Jan 29 '19 at 03:55 — Chellappan வ, Jan 29 '19 at 03:55

score 4 · Answer 1 · answered Apr 09 '21 at 20:23

Another approach is to provide all required methods of ChangeDetectorRef as part of your TestBed.configureTestingModule declaration.

For example if your code (or a 3rd library like in your case) uses the detectChanges method of the ChangeDetectorRef instance you can provide it as in the following example:

    beforeEach(() => {
        TestBed.configureTestingModule({
            providers: [
                // other providers here
                { provide: ChangeDetectorRef, useValue: { detectChanges: () => { } } }
            ]
        });
    });

score 3 · Answer 2 · answered Jan 29 '19 at 05:52

Are you using ChangeDetectionStrategy.OnPush as your Change Detection Strategy? ChangeDetectorRef is actually exposed to the fixture, as explained here.

If you have defined ChangeDetectorRef as one of your private attributes in your component like this:

constructor(private cdr: ChangeDetectorRef) { }

Since it is private, you should create a spy as a stub for that attribute in your test file, and test if the ChangeDetectorRef is being called. Simply mock the CDR on your .spec file by doing this:

it('test CDR', () => {
  const spyCDR = spyOn((component as any).cdr, 'detectChanges'); 

  component.method();    
  expect(spyCDR).toHaveBeenCalled();
});

How to fix No provider for ChangeDetectorRef! in Karma-Jasmine Testing

2 Answers2