如何使用 jest 在 stenciljs shadow dom 中查找组件答案

【问题标题】：how to find component in stenciljs shadow dom using jest如何使用 jest 在 stenciljs shadow dom 中查找组件
【发布时间】：2021-07-28 22:30:52
【问题描述】：

在 Stencil e2e 测试中，只有在从没有影子 DOM 的元素中进行选择时，我才能找到使用 "piercing" selector >>> 的组件：

例如

// defined as vars because they are reused in a sequence of tests  
var page: E2EPage,
    root: E2EElement,
    home: E2EElement,
    recipe: E2EElement,
    master: E2EElement

it('renders', async () => {
    page = await newE2EPage()
    await page.setContent('<app-root/>')

    root = await page.find('app-root')
    expect(root).toHaveClass('hydrated')

    home = await root.find('app-home')
    expect(home).not.toBeNull()

    recipe = await home.find('wizard-layout > screen-recipe >>> recipe-manager')
    expect(recipe).not.toBeNull()

    master = await home.find('wizard-layout > screen-recipe >>> recipe-manager >>> master-detail')
    expect(master).not.toBeNull()

  })

有效（=所有测试通过）

但是，我想从配方中获取具有较短选择器字符串的主文件。我尝试了所有这些，它们都失败了（master 为 Null 或未定义）：

master = await recipe.find(':host: >>> master-detail')
master = await recipe.find(':scope >>> master-detail')
master = await recipe.find('>>> master-detail')

jest/puppeteer 如何在给定模板组件的 shadow DOM 中找到组件？

谢谢！

【问题讨论】：

标签： jestjs puppeteer shadow-dom stenciljs

【解决方案1】：

据我所知，您不能像选择阴影元素那样使用 CSS 选择器。

您需要一一选择它们，如下所示：

// 伪代码

recipeElement
.shadowRoot
.querySelctor('myElement')

当myElement 本身有一个影子根并且您想进一步钻取时，情况会变得更糟，那么您最终会得到以下内容：

recipeElement
.shadowRoot
.querySelctor('myElement')
.shadowRoot
.querySelector('deepedElement')

【讨论】：