如何测试stenciljs嵌套组件

Question

我将一个stenciljs组件嵌入到另一个stenciljs组件中

<parent-component>
  <child-component attrz="x">
  </child-component>
</parent-component>

仅当父组件接收到具有以编程方式设置的属性'attrz‘的hover事件时，才呈现子组件。我在spec.js或e2e.js中设置了组件，并发出了一个悬停事件，然后等待更改。

例如：

  const page = await newE2EPage();
  await page.setContent(`<parent-component></parent-component>`);
  const el = await page.find('parent-component');
  await el.hover();
  await page.waitForChanges();

但是，我在spec.js或e2e.js测试中都看不到这个属性。而且，看起来spec.js和e2e.js实际上都没有渲染子组件。

那么我的问题是，有什么方法可以在stenciljs中测试子组件吗？

Answer 1

您可以通过E2EElement的getProperty()函数访问属性。因此，假设测试的其余部分如下所示：

const child = await page.find('child-component');

您可以使用以下命令测试'attrz‘属性：

expect(await child.getProperty('attrz')).toEqual('x');

您不需要在组件中使用reflect to -attr来测试属性。