如何修复没有 ChangeDetectorRef 的提供者！在 Karma-Jasmine 测试中答案

【问题标题】：How to fix No provider for ChangeDetectorRef! in Karma-Jasmine Testing如何修复没有 ChangeDetectorRef 的提供者！在 Karma-Jasmine 测试中
【发布时间】：2019-01-29 03:50:14
【问题描述】：

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

【问题讨论】：

你能添加一些代码

标签： angular karma-jasmine

【解决方案1】：

您是否使用ChangeDetectionStrategy.OnPush 作为您的变更检测策略？正如here 所解释的那样，ChangeDetectorRef 实际上暴露给了fixture。

如果您已将 ChangeDetectorRef 定义为组件中的私有属性之一，如下所示：

constructor(private cdr: ChangeDetectorRef) { }

由于它是私有的，因此您应该在测试文件中为该属性创建一个 spy 作为存根，并测试是否调用了 ChangeDetectorRef。只需通过以下方式在您的 .spec 文件中模拟 CDR：

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

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

【讨论】：

【解决方案2】：

另一种方法是提供ChangeDetectorRef 的所有必需方法作为TestBed.configureTestingModule 声明的一部分。

例如，如果您的代码（或您的情况下的第三个库）使用 ChangeDetectorRef 实例的 detectChanges 方法，您可以按以下示例提供它：

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

【讨论】：