点亮元素，单元测试 - 嵌套元素 - 子元素不呈现

问题描述

我对 lit-element 和单元测试非常陌生，我不确定这个问题是否被正确地构建。如有不对之处请指正。

所以，我创建了 1 个 lit 组件，以便它从 uri 中获取 json <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时，这整个呈现完美。

但是当我为此编写测试用例时，子元素的 shadowroot 似乎没有渲染。

  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"));

  }); 

statement-1 有效并返回 <carousel-helper></carousel-helper>
statement-2 返回空数组，NodeList {}

谁能告诉我从 statement-2 获取填充数组需要做什么？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）