Question

我最近一直在尝试使用茉莉花对使用影子dom的自定义Web组件进行一些单元测试。该组件接受一个text属性，并将其传递给一个子元素以用作其文本内容，我正在尝试验证textContent应该是它的内容。

每次我尝试访问组件的shadowRoot，然后访问其子组件时，它只会返回null。

我已经简化了一些名称，但是代码是相同的。

组件：

@Component({
    tag: 'my-button',
    styleUrl: 'my-button.css',
    shadow: true,
})
export class MyButton {
    @Prop() text: string;
    @Prop() iconName: string;
    @Prop() url: string;

    render() {
        return (
            <div class="button-outer">
                <ion-button class="button" expand="block" href={this.url}>
                    <holo-icon class="button-icon" slotName="icon-only" iconName={this.iconName} />
                    <p class="button-label">{this.text}</p>
                </ion-button>
            </div>
        );
    }
}

HTML：

<my-button
    text="Test"
    icon-name="assets/svg/test-icon.svg"
    url="/test"
></my-button>

测试：（TestBed正常设置-异步）

describe('has the expected html tags', () => {
    let buttons;

    beforeEach(() => {
        button = page.querySelector('my-button');
    });

    it('has text "Test"', () => {
        const label = button.shadowRoot.querySelector('div > ion-button > p');
        expect(label.textContent).toBe('Test');
    });
}

业力结果： TypeError: Cannot read property 'querySelector' of null

该Web组件是在一个单独的项目中开发的，并作为npm包导入的，如果有什么不同？

我可以在测试中创建一个元素，并为其添加一个影子根，然后我可以很好地访问和读取其内容，而不仅仅是属于我正在测试的外部页面组件的实际元素。在其他也使用影子dom的测试中，这确实使我受阻。我所能找到的只是提示fixture.detectChanges()的答案，但这似乎无济于事。

有人遇到这个问题或有解决方法吗？将不胜感激：）

编辑

如果我知道如何保存它，我将只查询其组件的text属性，但是它将被_ngcontent-c##=""取代

茉莉花-无法访问自定义Web组件的shadowRoot

0 个答案: