Angular测试中本机元素为null

Question

我试图在Angular文档之后模拟组件内部的单击以进行单元测试，但是由于某些原因，我的本机元素返回了空：HTMLButtonElement {}

起初，由于我的ngIf，我不得不添加detectChanges函数，但后来没有任何变化反映出来。

这也是我的HTML：

<div class="money-transfer-options" *ngIf="card">
    <div class="alert alert__info" role="alert">
        <i class="nc nc-icon-alert-circle-i"></i> Haremos un cargo con la cantidad seleccionada a la tarjeta con
        terminación:
        {{ card.card_number | bankAccountLastFourDigits }}
    </div>

    <form class="money-transfer-options__form" [formGroup]="form" (ngSubmit)="onSubmit()">
        <label
            [for]="'moneyTransferAmount' + i"
            class="money-transfer-options__card"
            *ngFor="let amount of amounts; index as i"
            (click)="toggleActiveClass(i)"
        >
            <input
                type="radio"
                class="money-transfer-options__card-radio"
                [id]="'moneyTransferAmount' + i"
                [value]="amount"
                formControlName="amountTransfer"
                required
            />
            <span class="money-transfer-options__card-amount">
                <span class="money-transfer-options__card-icon"></span>
                <span class="money-transfer-options__card-currency-symbol">$</span>
                <span class="money-transfer-options__card-total">{{ amount | currency: 'MXN':'':'1.0-0' }}</span>
                <span class="money-transfer-options__card-comission">
                    Comisión: <br />
                    <span class="money-transfer-options__card-comission-amount">
                        {{ amount * commission + fee | currency: 'MXN':'symbol':'1.2-2' }}
                    </span>
                </span>
            </span>
        </label>
        <button
            type="submit"
            class="button button__primary money-transfer-options__submit"
            aria-label="Agregar fondos a mi cuenta"
            [disabled]="!form.valid"
        >
            Agregar Fondos
        </button>
    </form>

    <small class="money-transfer-options__disclaimer">
        *Las transacciones tardan en promedio hasta 5 minutos en verse reflejadas.
    </small>
</div>

这是我的spec.ts文件：

beforeEach(async(() => {
    const configure: ConfigureFn = testBed => {
        TestBed.configureTestingModule({
            imports: [ReactiveFormsModule],
            declarations: [MoneyTransferOptionsComponent, BankAccountLastFourPipe],
            providers: []
        }).compileComponents();
    };

    configureTests(configure).then(testBed => {
        fixture = testBed.createComponent(MoneyTransferOptionsComponent);
        component = fixture.componentInstance;
        component.card = expectedTokenizedCard;
        component.amounts = expectedAmounts;

        fixture.detectChanges();
    });
}));

it('should emit the payload for the request', async () => {
    component.card = expectedTokenizedCard;

    fixture.detectChanges();

    await fixture.whenStable();

    const submitButton = fixture.debugElement.query(By.css('.money-transfer-options__submit'));
    let submitButtonEl = submitButton.nativeElement;

    let testPayload: Common.TokenizedCardDeposit;

    console.log(submitButtonEl);


    //component.onFormSubmit.subscribe((payload: Common.TokenizedCardDeposit) => (testPayload = payload));

    //submitButtonEl.triggerEventHandler('click', null);
    // expect(testPayload).toBe(expectedPayload);
});