Stencil: "Protocol error" when running E2E tests

[joelalejandro]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

• [x] bug report
• [ ] feature request
• [ ] support request

Current behavior:
There are E2E tests that fail with the following error:

    Protocol error (Runtime.callFunctionOn): Target closed.

Expected behavior:
The test should pass.

Steps to reproduce:
On both CI and local, the following run depicts what happened.

https://circleci.com/gh/counterfactual/monorepo/12142

Related code:

The test is a plain it('renders') case for a mere presentational component:

Component

import { Component } from "@stencil/core";

@Component({
  tag: "layout-footer",
  styleUrl: "layout-footer.scss",
  shadow: true
})
export class LayoutFooter {
  render() {
    return (
      <footer class="footer">
        <span>Made with </span>{" "}
        <img src="/assets/icon/ethereum.svg" alt="Ethereum" />{" "}
        <span>across the world</span>
      </footer>
    );
  }
}

E2E test

import { newE2EPage } from "@stencil/core/testing";

describe.skip("layout-footer", () => {
  it("renders", async () => {
    const page = await newE2EPage();
    await page.setContent("<layout-footer></layout-footer>");

    const element = await page.find("layout-footer");
    expect(element).toHaveClass("hydrated");
  });
});

Other information:

Full stack trace:

    Protocol error (Runtime.callFunctionOn): Target closed.
      at Promise (../../node_modules/puppeteer/lib/Connection.js:203:56)
      at CDPSession.send (../../node_modules/puppeteer/lib/Connection.js:202:12)
      at ExecutionContext.evaluateHandle (../../node_modules/puppeteer/lib/ExecutionContext.js:97:75)
      at WaitTask.rerun (../../node_modules/puppeteer/lib/FrameManager.js:883:62)

Attempted fixes:

• Used --disable-dev-shm-usage as suggested on GoogleChrome/puppeteer#3683
• Used --runInBand to run tests in serial mode instead of parallel executions
• Refactored tests to use a single e2ePage per suite, rendering multiple components and wrapping them into HTML container so each test case has its own "root" element

[maxjustus]

I ran into this same issue working with e2e tests. Are you explicitly setting resourcesUrl in your outputTargets: config for the www type? If so that's the issue. It's failing because the lazy loaded component files are 404ing. It seems that the test build will always use that value for the data-resources-url attribute on the script tag even though the test runner's server serves all component assets from /build. It seems to be a bug that it would work that way, but as a workaround you can remove that setting and set data-resources-url="/wherever/it/serves/from/in/your/app" directly on the script tag where you're including the core stencil loader script in your template.

[joelalejandro]

@maxjustus We didn't define any outputTargets in our stencil.config.js. It's just running on the default configuration. I did notice, however, when running the tests in _headful_ mode (i.e. actually watching the browser run the tests) that lots of assets were 404ing.

So, if I understand you correctly, you're saying I should add data-resources-url to this line?

[eshtadc]

@joelalejandro I'm watching this due to a similar encountered error (and also without a resourcesUrl explicitly set. I noticed you mentioned watching browser run tests in a "headful" mode. How were you able to do that? Is there a flag to pass in the command line?

[joelalejandro]

@eshtadc Stencil exposes a testing property in its configuration, which is an extension of a JestConfig object. You can add the following block to your stencil.config.ts file to disable the headless mode:

  testing: {
    browserHeadless: false
  }

[maxjustus]

@joelalejandro that data attribute on the <script /> tag would only be necessary as an alternative to the resourcesUrl setting. Since you're not using that setting the cause is something else, but it seems you're having the same issue I ran into since component requests are 404ing. Can you paste some example urls to components that are 404ing from the web inspector when you run chrome in headful mode?

[Nightbr]

Hey, we are running into this issue, we have integrated Storybook with stenciljs and we are serving stenciljs files to storybook devServer with the www output target. The problem is like you said, Jest does't work with the resourcesUrl...

/**
     * Output target `www` needed for publishing storybook and hosting them.
     */
    {
      type: 'www',
      serviceWorker: null, // disable service workers
      /**
       * The `resourcesUrl` key is needed for stencil to resolve relative paths in dev server mode.
       * Since we are using the `stencil devServer` to serve the output files to `storybooks' devServer`,
       * We need resolve the relative paths on `stencil devServer`.
       */
      resourcesUrl: getResourcesURL(protocol as Protocol, host, port, name, buildDir),
      buildDir
    },

https://github.com/nisheed2440/stencil-storybook-wrapper

Any idea on this?

Note: If I comment resourcesUrl, npm run test works fine 👌 but Storybook doesn't resolve stenciljs assets (normal ^^)

[Nightbr]

I fixed this by just adding cross-env STENCIL_ENV=dev in package.json for test and test.watch and it works:

"test": "cross-env STENCIL_ENV=dev stencil test --spec --e2e",
"test.watch": "cross-env STENCIL_ENV=dev stencil test --spec --e2e --watchAll",

If it can help someone ;)

[adamdbradley]

This should be fixed in the latest version. If it's still a problem, would you be able to create an issue with a thorough description on how to replicate this? Thanks