Search code examples
javascripttestingstenciljs

How to test stenciljs nested components

I have a stenciljs component embedded inside another stenciljs component

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

The child-component is only rendered when the parent-component receives a hover event with an attribute 'attrz' set programmatically. I set up the component in either spec.js or e2e.js and issue a hover event and then wait for changes.

e.g.:

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

However, I cannot see this attribute in either spec.js or e2e.js tests. Also it seems that neither spec.js nor e2e.js actually renders the child-component.

So my question is there any way I can test child components in stenciljs?

Solution

  • You can access properties through the getProperty() function of E2EElement. So assuming that the rest of your test looks something like:

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

    You can test the 'attrz' property using:

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

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