时间戳

首页 > 解决方案 > 如何测试 stenciljs 嵌套组件

javascript - 如何测试 stenciljs 嵌套组件

问题描述

我在另一个 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 中测试子组件？

标签： javascripttestingstenciljs

解决方案

您可以通过getProperty()E2EElement 的功能访问属性。所以假设你的测试的其余部分看起来像：

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

您可以使用以下方法测试“attrz”属性：

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

You do not need the use reflect-to-attr in components to test properties.

推荐阅读