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

Question

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

  })

工作（=所有測試通過）

但是，我想從具有較短選擇器字符串的配方中獲取主文件。 我嘗試了所有這些，它們都失敗了（主人是 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 中找到組件？

謝謝 ！

Answer 1

據我所知，您不能像使用 select 陰影元素那樣使用 CSS 選擇器。

你需要 select 一個一個一個一個，像這樣：

// 偽代碼

recipeElement
.shadowRoot
.querySelctor('myElement')

當myElement本身有一個影子根並且您想進一步鑽取時，情況會變得更糟，那么您最終會得到如下所示的內容：

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