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

如何解决单元测试 LitElement 组件时如何正确存根元素？

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

元素定义文件

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>
       `;
   }
}

元素测试文件

describe("Test Case for the AppElement Component",function() {
beforeEach(() => {
    app = new AppElement();
    document.body.appendChild(app);
    shadow = app.shadowRoot;
    app.updateComplete.then(() => {
        const tapListStub = new TapListElementStub();
        const tapListNodes = shadow.querySelectorAll('tap-list-element');
        console.log(app);
        const tapListLength = tapListNodes.length;
        const tapListNode = tapListLength === 1 ? tapListNodes[0] : null;
        tapListNode.replaceWith(tapListStub);
    });
});

it("should have the node for tap-list replaced with a stub",function(done) {
    app.updateComplete.then(() => {
        const newTap: TapListElement = shadow.querySelector('tap-list-element');
        console.log(shadow);
        assert.strictEqual('Tap List Stub',newTap.name);
        done();
    })
});

这是原始 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 装饰器，但随后出现错误，指出调用了非法构造函数。 有没有人试过存根 litElement 组件？ 我来自 Angular 背景。 Testbed 辅助库在那里设置模块，您可以替换任何组件，只要属性保持不变并且装饰器中组件的名称相同。

解决方法

第一个错误很可能是因为 <tap-list-element> 在两个版本中被定义了两次。这是无法避免的，因为现在自定义元素是 not un-definable （因此可以使用不同的类重新定义）。尝试删除注册调用并不能解决问题，因为组件仍会使用原始类创建。

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