unit-testing - Lit 要素、単体テスト - ネストされた要素 - 子要素がレンダリングされない

Question

私はlit-elementと単体テストに非常に慣れていないので、質問が正しく組み立てられているかどうかさえわかりません。どこか間違っている場合は修正してください。

そのため、uri から json をフェッチするように作成された lit コンポーネントが 1 つあります。 <abc infoJsonLink="../data/data.json"></abc>

data.json

[
 {"id":1, "name":"one", "img":"one.jpg"},
{"id":1, "name":"two", "img":"two.jpg"}, 
...]

abc の render() メソッド内で、json データをループし、各項目に対応する html マークアップを含む配列を作成します。itemsMarkupList

 *0* <div "item-data"><span>one</span><img src="one.jpg"/></div> 
 *1* <div "item-data"><span>two</span><img src="two.jpg"/></div>  
 *2* ...

これらの各マークアップは、ブートストラップ カルーセルでレンダリングする必要があります。https://mdbootstrap.com/snippets/jquery/ascensus/135508

このために、別のコンポーネント を作成しました。このコンポーネントには<carousel-helper>、マークアップの配列を受け取り、ブートストラップ ライブラリを使用してカルーセルとしてレンダリングするコードが含まれています。

以下はコンポーネントのrender()メソッドです<abc>

render(){... 
let ch = document.createElement("carousel-helper"); 
ch.itemsMarkupList = this.itemsMarkupList;
return html`... <div class="parent_wrapper"> ${ch} </div>`;
}

私がそれをすると、この全体が完全にレンダリングnpm runされます。

しかし、これのテスト ケースを書いているとき、子要素のシャドウ ルートがレンダリングされていないようです。

  it("test1", async () => {
   const el = /** @type {Abc} */ (await fixture(
    html`<abc infoJsonLink="/data/data.json"></abc>
    `));

  await el.loadJsonData();

  /*statement 1*/
  console.log(el.shadowRoot.querySelector("carousel-helper")); 

  /*statement 2*/
  console.log(el.shadowRoot.querySelector("carousel-helper").
    shadowRoot.querySelectorAll(".item-data"));

  }); 

ステートメント 1が機能し、<carousel-helper></carousel-helper>
ステートメント 2が返され、空の配列が返されます。NodeList {}

statement-2から塗りつぶされた配列を取得するために何をする必要があるか教えてもらえますか?