New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using Shadow DOM Causes Tests to Hang #381

kensodemann opened this Issue Dec 22, 2017 · 4 comments


6 participants
Copy link

kensodemann commented Dec 22, 2017

Stencil version:


I'm submitting a:

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';

  tag: 'my-component',
  styleUrl: 'my-component.scss',
  shadow: true
export class MyComponent {

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

  render() {
    return (
        Hello, World! I'm {this.first} {this.last}

Other information:

@kensodemann kensodemann referenced this issue Dec 22, 2017


Start project tests fail #355

0 of 2 tasks complete

@jgw96 jgw96 added the tests label Dec 27, 2017

@jgw96 jgw96 added the bug label Jan 5, 2018

@jgw96 jgw96 referenced this issue Jan 9, 2018


Testing shadow dom component #311

0 of 2 tasks complete

This comment has been minimized.

Copy link

mattdsteele commented Jan 16, 2018

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:

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.


This comment has been minimized.

Copy link

rolandjitsu commented Jan 17, 2018

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.

@adamdbradley adamdbradley added this to the 0.4.0 milestone Jan 24, 2018

@adamdbradley adamdbradley modified the milestones: 0.4.0, 0.5.0, 0.6.0 Feb 8, 2018

@adamdbradley adamdbradley modified the milestones: 0.6.0 - import collections, 0.10.0 - Testing Feb 19, 2018


This comment has been minimized.

Copy link

silentHoo commented Jun 5, 2018

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

@jthoms1 jthoms1 added this to Backlog 🤖 in Stencil via automation Sep 10, 2018


This comment has been minimized.

Copy link

adamdbradley commented Oct 23, 2018

No longer applicable with latest version

Stencil automation moved this from Backlog 🤖 to Done 🎉 Oct 23, 2018

@ionic-team ionic-team locked as resolved and limited conversation to collaborators Oct 23, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.