Typescript 在单元测试LitElement组件时，如何正确地存根元素？

我正在尝试对LitElement组件进行单元测试。在尝试隔离组件时，我对如何实际存根元素感到困惑。也就是说，我找不到一个解决方案，如何用空心元件替换合适的元件。
单元测试主题中的polymer项目提到我没有找到replace（）函数的定义来查看实现细节。实际上，聚合物项目在“创建存根元素”标题中描述的内容就是我要寻找的

元素定义文件

export class AppElement extends LitElement {
    render() {
        return html`
            <header-element class="header"></header-element>
            <div class="body">
                <menu-element></menu-element>
                <social-media-element></social-media-element>
                <contacts-element></contacts-element>
                <tap-list-element name="Fridge List" display="fridge"></tap-list-element>
                <tap-list-element route="tap" name="Tap List" display="tap" ></tap-list-element>
                <home-element></home-element>
                <about-us-element></about-us-element>
                <not-found-element></not-found-element>
            </div>
       `;
   }
}

以下是原始TapListElement的代码

@customElement('tap-list-element')
export class TapListElement extends LitElement {
    private _menu: Menu;
    private _tapList: Section;
    private _bottleList: Section;

    @property()
    name: string = 'Tap List';

    @property({type: String, attribute: true})
    display: string;

    constructor() {
        super();
        super.connectedCallback();
    }
}

这是存根

@customElement('tap-list-element')
export class TapListElementStub extends LitElement {

    @property()
    name: string = 'Tap List Stub';

    @property({type: String, attribute: true})
    display: string;

    constructor() {
        super();
        super.connectedCallback();
    }
}

对任何缩进打字错误表示歉意

当我尝试上面的代码时，我得到一个错误，即名为“tap list element”的web组件已经注册。我试图删除TapListElementStub中的@customElement decorator，但随后出现了一个错误，即调用了非法构造函数。 有人尝试过删除litElement组件吗？

---

我来自一个有角度的背景。在那里，TestBed helper库设置了模块，只要属性保持不变并且装饰器中的组件名称相同，您就可以替换任何组件。

第一个错误可能是由于在两个版本中定义了两次

。这是无法避免的，因为到目前为止，自定义元素是（因此可以用不同的类重新定义）。在尝试时删除注册调用并不能解决问题，因为组件仍将使用原始类创建

---

最简单的解决方案是使用不同的标签名（即使您引用的Polymer文档也会这样做）。如果您确实需要相同的标记名，那么我建议只替换原始类的一些属性/方法。OpenWC和现代Web测试指南有一些部分（，）专门用于此。

谢谢。您引用的资源是完美的起点。我认为以某种方式实现导入映射可以解决我的问题。

@customElement('tap-list-element')
export class TapListElementStub extends LitElement {

    @property()
    name: string = 'Tap List Stub';

    @property({type: String, attribute: true})
    display: string;

    constructor() {
        super();
        super.connectedCallback();
    }
}