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

在Stencil e2e测试中，仅当从没有阴影DOM的元素中选择时，我才能使用查找组件：

比如说

// 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()

  })

jest/Puppeter如何在给定模具组件的阴影DOM中找到组件

---

谢谢

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

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

//伪码

recipeElement
.shadowRoot
.querySelctor('myElement')

如果

myElement

本身有一个阴影根，并且您想进一步钻取，则情况会变得更糟，最后会出现如下情况：

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

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