使用 Renderer2 对角度组件进行单元测试答案

【问题标题】：Unit Testing angular component with Renderer2使用 Renderer2 对角度组件进行单元测试
【发布时间】：2020-11-12 05:52:09
【问题描述】：

我有一个看起来像这样的角度组件：

constructor(
        @Inject(INJECTION_TOKEN_WINDOW) private window: Window,
        private renderer: Renderer2
){}

ngOnInit() {
  this.renderer.addClass(this.window.document.body, 'myCssClass');
}

单元测试sn-p：

const TOKEN_WINDOW = 'Window';

const WindowMock = {
    document: {
        body: {}
    }
};
describe('MyComponent', () => {
let renderer: Renderer2;
let component: MyComponent;
let fixture: ComponentFixture<MyComponent>;

beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [MyComponent],
            schemas: [CUSTOM_ELEMENTS_SCHEMA],
            providers: [
                Renderer2,
                { provide: TOKEN_WINDOW, useValue: WindowMock }
            ]
        }).compileComponents();
    }));

beforeEach(() => {
        fixture = TestBed.createComponent(MyComponent);
        component = fixture.componentInstance;
        el = fixture.debugElement;

        renderer = fixture.componentRef.injector.get<Renderer2>(Renderer2 as Type<Renderer2>);
        spyOn(renderer, 'myCssClass').and.callThrough();
        fixture.detectChanges();
    });
})

//Tests here...

我在运行测试时遇到错误（对于任何测试，我在下面遇到相同的错误）。我猜我的测试中的 Renderer2 配置有问题？请帮忙

TypeError: Cannot read property 'add' of undefined
    at <Jasmine>
    at DefaultDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.addClass (http://localhost:9876/_karma_webpack_/node_modules/@angular/platform-browser/fesm5/platform-browser.js:1160:67)
    at DebugRenderer2.push../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.addClass (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:30455:1)
    at <Jasmine>

【问题讨论】：

标签： javascript angular unit-testing jasmine

【解决方案1】：

我认为Renderer2 需要窗口的实际实现而不是模拟，并且模拟实际窗口到满足实际Renderer2 的程度可能很麻烦。

要么模拟window 和Renderer2 以使您的组件满意，要么提供实际窗口和实际Renderer2。

【讨论】：