如何测试 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(await child.getProperty('attrz')).toEqual('x');

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

Answer 2

这也可以在单元测试中使用 newSpecPage 进行测试。

const child = page.root.querySelector('child-component');

现在只需在 child 上直接引用 attrz 属性值：

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

如何测试 stenciljs 嵌套组件

How to test stenciljs nested components

javascript

testing

stenciljs