模板单元测试:访问深度嵌套的Shadow DOM组件

Question

我有一个包含一些嵌套元素的Stencil.js组件库，我正在进行单元测试

我正在使用模板提供的newSpecPage助手功能：

const page = await newSpecPage({
    components: [CustomFileInput, CustomPanel],
    html: `
      <custom-file-input multiple>                    
      </custom-file-input>
    `
});

CustomPanel组件嵌套在CustomFileInput组件中。要查询CustomPanel中的元素，必须先遍历Shadow DOM元素，然后才能成功运行querySelector()命令

// page.root is the CustomFileInput HTML Element
const customPanelElement = page.root.shadowRoot.querySelector('custom-panel');
const queriedElemnt = customPanelElement.shadowRoot.querySelector('panel-child')

我想知道有没有一种更简洁的方法来获得对CustomPanel或panel-child元素的引用，而不是向下查询组件？在上面的例子中，只有2个组件，当然还有更多的组件

Answer 1

我假设您使用的是shadow:true，所以您必须使用page.root.shadowRoot.querySelector('custom-panel')

你能做的是，你可以在beforeEach块中赋值引用

   const customPanelElement;
   const queriedElemnt;
   const page;

   beforeEach(async () => {
    page = await newSpecPage({
    components: [CustomFileInput, CustomPanel],
    html: `
      <custom-file-input multiple>                    
      </custom-file-input>
    `,
      supportsShadowDom: true
    });
    //Create reference here so that it is available inside every test case
    customPanelElement = page.root.shadowRoot.querySelector('custom-panel');
    queriedElemnt = customPanelElement.shadowRoot.querySelector('panel-child')
  });