Stencil: Using Shadow DOM Causes Tests to Hang

[kensodemann]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

• [x] bug report
• [ ] feature request
• [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:

If you clone the stencil-component-starter and run the tests, they hang. The tests work in stencil-app-starter. Comparing the two repos, the big difference is that the component starter uses shadow DOM whereas the app starter does not.

Expected behavior:

No hangy hangy in the testy testy.

Steps to reproduce:

1. clone the stencil-component-starter repo
2. npm i; npm run build; npm test
3. drink coffee while tests hang until timeout
4. remove shadow: true parameter from the one component in this repo
5. npm test
6. rejoice as tests work

Related code:

import { Component, Prop } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.scss',
  shadow: true
})
export class MyComponent {

  @Prop() first: string;
  @Prop() last: string;

  render() {
    return (
      <div>
        Hello, World! I'm {this.first} {this.last}
      </div>
    );
  }
}

Other information:

[mattdsteele]

As info, I wanted to see if this was related to JSDom's (lack of) support for Shadow DOM, so I tried setting up Jest to run against Headless Chrome and Puppeteer, via this guide.

Repo here: https://github.com/mattdsteele/stencil-component-puppeteer

On a Mac, I'm seeing the same hanging failures for any tests that use render(), as described above. This happens regardless of whether I set shadow to true or false.

[rolandjitsu]

I'm getting the same issue. It seems like render() always returns null, no matter if I have only a <div></div> in the {html} prop and no components or if I have components.

[silentHoo]

@adamdbradley Are there any updates on that issue since 0.6.0?

[adamdbradley]

No longer applicable with latest version