javascript - 如何测试 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

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

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

现在只需在子项上直接引用 attrz 属性值即可:

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