0

render() 中的行：

<div class={{ 'modal-backdrop show': this.show, 'modal-backdrop hide': !this.show }}>

测试 ：

it('should display correctly', async () => {
    const page = await newE2EPage();
    await page.setContent('<my-component></my-component>');

    let element = await page.find('my-component');
    expect(element).not.toBeNull();

    element = await page.find('div.modal-backdrop.hide');
    expect(element).not.toBeNull();
  });

问题描述： 我只提供了一部分代码，不幸的是，由于保密，我无法提供更多。但是，我会尽力描述这个问题。项目中有两个组件，组件 A 的测试可以正常工作。对组件 B（如上提供）的测试没有。当第一个期望通过时，第二个期望由于它为空而失败，但它不应该。

几个事实：

  1. 该项目可以毫无问题地构建、运行和使用。
  2. 单元测试按预期工作，包括对 render() 方法的测试。
  3. 代码本身并没有错，我已经测试、重新测试和再次测试，它适用于其他组件，但不适用于这个组件。
  4. 虽然默认是 .hide，但我尝试过使用 .hide 和 .show，但都不起作用。

迄今为止的最佳猜测： 由于代码的编写方式，我在让测试正常工作时遇到了很多问题。在运行测试时，许多未定义的对象导致测试失败。从我尝试和测试的所有内容来看，我最好的理论是，由于某种原因，这个组件的一半在 puppeteer 浏览器的上下文中失败了，只生成了核心对象。我不知道这是否可能，但看起来是这样的。

4

1 回答 1

1

Web 组件使用它们自己的名为 的文档树shadowDOM，它在主 DOM ( page) 中是不可见的；因此你page.find失败了。这个概念称为封装。顺便说一句，我无法在 Puppeteer 的文档中找到对该对象find调用的方法；你能解释一下它是从哪里来的吗？page

要访问 Web 组件中的影子树，您必须使用以下命令访问它element.shadowRoot：

element = await page.find('my-component');
expect(element.shadowRoot.querySelector('div.modal-backdrop.hide')).not.toBeNull();

有 puppeteer 插件和应用程序可以帮助解决这个问题：

要了解更多信息，请查看https://www.google.com/search?q=puppeteer+shadow+DOM。

于 2022-02-23T08:09:39.660 回答