如何测试stenciljs嵌套组件

Question

我在另一个stenciljs组件中嵌入了一个stenciljs组件

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

仅当父组件收到通过编程设置属性'attrz'的悬停事件时，才呈现子组件。我在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(child.getProperty('attrz')).toEqual('x');

您不需要在组件中使用“反射到属性”来测试属性。