0

我正在尝试使用测试库在角度类型的日期输入上进行此测试。但不断收到此错误：

 TestingLibraryElementError: Unable to find a label with the text of: date-input-label

我的模板是这样的：

<ng-container [formGroup]="reactivationDateForm">
  <label for="date-input-label" class="form-label">GLOBAL_date</label>
  <input
    formControlName="inputReactivationDate"
    type="date"
    id="date-input-label"
    class="form-control"
    name="date-input"
    (change)="inputDateValue()"
  />
</ng-container>

那么我的与输入相关的测试将是这样的：

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
import { fireEvent, render, RenderComponentOptions, screen } from '@testing-library/angular';
import { Component } from '...';



describe('ContractCardComponent', () => {
  const getOptions = (
    props?: Partial<Component>
  ): RenderComponentOptions<Component> => {
    return {
      componentProperties: props,
      providers: [FormBuilder, ReactiveFormsModule],
      declarations: [Component],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    };
  };

  it('Component', async () => {
    await render(Component, getOptions());

    const input = await screen.getByLabelText('date-input-label').querySelector('input');


    fireEvent.change(input, { target: { value: '23' } });

    expect(screen.getByText('Error in date format')).toBeInTheDocument();
  });
});

但是由于某种原因，尽管在控制台中接收到整个呈现的组件包含根据错误未找到的标签，但输入 dom 并未呈现：


TestingLibraryElementError: Unable to find a label with the text of: date-input-label

    Ignored nodes: comments, <script />, <style />
    <body>
      <div
        id="root1"
        ng-version="11.0.2"
      >
        <label
          class="form-label"
          for="date-input-label"
        >
          GLOBAL_date
        </label>
        <input
          class="form-control"
          formcontrolname="inputReactivationDate"
          id="date-input-label"
          min="2022-02-10"
          name="date-input"
          type="date"
        />
       
      </div>
    </body>

      28 |     await render(Component, getOptions());
      29 |
    > 30 |     const input = await screen.getByLabelText('date-input-label').querySelector('input');
         |                                ^

有人可以给我一个想法来改善这种情况吗？

4

0 回答 0