javascript - Angular Testing Library テストで html プロパティをレンダリングする

Question

Angular テストに testing-library を使用しています。HTML からプロパティを設定して、必要な方法でコンポーネントをレンダリングできるようにする必要がある状況があります...このプロパティはモジュールから取得されます。 componentProperties を介してコンポーネントを渡してレンダリングしようとしましたが、うまくいきませんでした...コンポーネントを適切にレンダリングできるように、テストでこのプロパティを設定する方法を知っていますか?

次のように、html にあるプロパティ ifMobile をレンダリングする必要があります。

<xpto-aba-table-mobile
      *ifMobile="true"
      id="id-xpto-table-mobile"
      class="tabela"
      [tableData]="detailsTableData"
      [loading]="loading"
    >
    </xpto-aba-table-mobile>

これは私がテストしようとしていた方法です:(このようにしてテストを実行してもエラーは表示されませんが、コンポーネントはレンダリングされず、基本的にコンポーネントはまったく変更されませんでした)

  it('test', async () => {
    const { container } = await render(IfMobileModule, {
      imports: [IfMobileModule],
      template: `<xpto-aba-table-mobile id="id-ativos-escriturais-table-mobile" class="tabela" [tableData]="detailsTableData" \
      [loading]="loading" *ifMobile="true" ifMobile="true">should show when mobile</xpto-aba-table-mobile>`,
      wrapper: MyComponentDetailComponent,
      componentProperties: {
        hasMessage: false,
        detailsTableData$: myMock,
        ifMobile: true,
        // ifMobile: (): boolean => true,
      },
    });
    const element = container.querySelector("#id-xpto-table-mobile");
    expect(element).toBeInTheDocument();
  });

私もこの方法でテストしようとしました（この方法では、ifMobileは有効なプロパティではないため、テストを実行することさえできません）

  it('test2', async () => {
    const { container, debug } = await render(MyComponentDetailComponent, {
      imports: [IfMobileModule],
      componentProperties: {
        hasMessage: false,
        detailsTableData$: myMock,
        ifMobile: true,
      },
    });
    const element = container.querySelector("#id-xpto-table-mobile");
    expect(element).toBeInTheDocument();
  });