testing - 使用 open-wc 测试 Lit 元素时如何访问 shadowDom

Question

Lit 文档将 Web Test Runner 称为测试。它导航到这个示例页面。

我试过测试MyElement，只有一个<p>。

import { LitElement, html } from "lit";
import { customElement } from "lit/decorators.js";

@customElement("my-element")
export class MyElement extends LitElement {
  render() {
    return html`<p>Hello, World.</p>`;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "my-element": MyElement;
  }
}

通过 open-wc 进行测试时，该元素shadowDom没有<p>在descendant.

import { expect, fixture, html } from "@open-wc/testing";
import { MyElement } from "../src/MyElement";

it("get shadowDom", async () => {
  const el: MyElement = await fixture(html`<my-element></my-element>`);
  expect(el).shadowDom.to.be.not.null; // passed
  expect(el).shadowDom.to.have.descendant("p"); // failed
});

是否需要更多设置来使用 open-wc 测试 Lit 元素？web-test-runner.config.js 是：

import { esbuildPlugin } from '@web/dev-server-esbuild';

export default {
  files: ['test/*.test.ts'],
  plugins: [esbuildPlugin({ ts: true })],
};

Answer 1

尝试使用 shadowRoot 而不是 shadowDom：

it("get shadowDom", async () => {
    const el = await fixture(
      html` <my-element></my-element>`
    );
    const descendant = el.shadowRoot!.querySelector("p")!;
    expect(descendant).to.be.not.null;
});