Jasmine - 无法访问自定义 Web 组件的 shadowRoot

Question

我最近一直在尝试使用 jasmine 对使用 shadow 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 包导入，如果这有什么区别吗？

我可以在测试中创建一个元素，并将一个影子根附加到它，我可以很好地访问和读取它的内容，只是不是属于我正在测试的外部页面组件的实际元素。它真的让我无法进行其他使用 shadow dom 的测试。我能找到的只是建议的答案，fixture.detectChanges()但这似乎没有任何作用。

有没有人遇到过这个或有解决方法或任何东西？将不胜感激:)

编辑

text如果我知道如何保留它，我只会查询我的组件的属性，但它只是被替换为_ngcontent-c##=""