组件返回未定义的 Angular / Karma 测试

Question

我正在尝试为一个小型可重用组件编写一个角度测试，当单击该组件时会发出一个事件以复制 DOM 上的按钮单击但该组件返回未定义

测试报告似乎还说第二个测试场景没有被 nullinjector 捕获，并且找不到要监视 onExportClicked() 的对象

测试代码是这样的：

import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
import { ImportExportComponent } from './import-export.component';
import { SharedModule } from '../../../shared.module';

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

    beforeEach(
        waitForAsync(() => {
            TestBed.configureTestingModule({
                imports: [SharedModule],
                declarations: [ImportExportComponent]
            })
                .compileComponents()
                .then(() => {
                    fixture = TestBed.createComponent(ImportExportComponent);
                    component = fixture.componentInstance;
                });
        })
    );

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

    it('should trigger export event emitter when button is clicked', fakeAsync(() => {
        spyOn(component, 'onExportClicked');
        const button = fixture.debugElement.nativeElement.querySelector('button');
        button.click();
        tick();
        expect(component.onExportClicked).toHaveBeenCalled();
    }));
});

组件代码是这样的：

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
    selector: 'utc-import-export',
    templateUrl: './import-export.component.html',
    styleUrls: ['./import-export.component.scss']
})
export class ImportExportComponent {
    @Output() exportClicked = new EventEmitter<null | File>();

    constructor() {}

    // Emits an event triggering export in parent component
    onExportClicked(): void {
        this.exportClicked.emit();
    }
}

组件 HTML 是：

<button class="dropdown-item" 
type="button" 
(click)="onExportClicked()">
{{ 'LABELS.EXPORT' | translate }}
</button>

任何关于为什么会发生这种情况的帮助或解释都会非常有用。谢谢！

Answer 1

我怀疑它不会进入

.then

块来创建

component

和

fixture

。

试试这个：

beforeEach(
        waitForAsync(() => {
            // !! Make sure you see this log first.
            console.log('In the first beforeEach');
            TestBed.configureTestingModule({
                // !! Get rid of SharedModule, maybe it is causing problems
                // Your component doesn't need it.
                // imports: [SharedModule],
                declarations: [ImportExportComponent]
            })
                .compileComponents();
        })
    );

    beforeEach(() => {
       fixture = TestBed.createComponent(ImportExportComponent);
       component = fixture.componentInstance;
       // Make sure you see this log second and the component is defined.
       console.log('In second beforeEach. The component is: ', component);
    });

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

第二个测试看起来不错，但似乎您的组件构建不正确。