👋 Welcome!

[rwaskiewicz]

This category of discussions if for Stencil Testing, with a focus on packages/infrastructure.

As of Stencil v3.4, Stencil supports Jest 24 through 27 and Puppeteer 10 thru 20.

We're working on bringing support for Jest 28 + 29 to Stencil, but would like folks to chime in with their specific testing needs. Do you need to use a specific version of Jest? Looking to use a different library from Stencil's current stack? Please open a new discussion, we'd love to hear from you!

[dhdaines]

In https://github.com/ReadAlongs/Web-Component we are, in theory, using @nx/jest a.k.a. @nrwl/jest which, I believe, requires Jest 28 (it's really hard to keep track of all these versions of everything...)

In practice of course this doesn't really work, so we just fall back on end-to-end testing with Cypress, which does work, consistently.

[dgonzalezr]

In our case, we rely on Nx to handle our monorepo and all our unit testing and e2e tests have been written with Jest and Puppeteer, following Stencil documentation. Unfortunately, we must stick to Nx 14 because Stencil supports only up to Jest 27.
Nx is currently on version 16, from the previous version (v15) Nx has released a lot of improvements for monorepos which we cannot take advantage of. Overriding Jest is not ideal because it could break with other stuff in the Nx ecosystem and we prefer Jest and Puppeteer over Cypress.
We have been thinking many times about dropping Stencil because of the lack of support in this matter. I feel is unfair not to be able to access new features and functionalities because something is holding you back to upgrade, which is not sustainable for anyone.

[dgonzalezr]

Also, there was a scope change in the Nx packages (from @nrwl to @nx), and starting v17 there won't be any maintenance to the old scoped npm packages. Meaning that we (those still opting for Stencil testing setup: Jest and Puppeteer) will be stuck.

The main reason why we are still opting to continue with the Stencil testing setup is that we don't need to create pages that load the components first and from there to carry on our e2e suites. It comes really handy how easily you can get your e2e tests up and running with the Stencil approach.

[DrFlowerShirt]

We also use Stencil within an NX monorepo. For all unit tests we use jest. For e2e tests Cypress. Our main frontend framework for almost all applications is Angular. The UI components for our mobile apps are based on Ionic and Stencil. The UI library for our newer web apps are written entirely in Angular, as this involves less configuration work and incopatibilities for us. Since we are working with the current version of NX, we had to disable unit-tests for the stencil components in the pipeline and try to catch this as much as possible with Cypress tests. Of course, this is not a satisfactory permanent state.

[angelo-v]

I am waiting eagerly for jest > 27 support. I prefer to run stencil tests with plain jest instead of the stencil test command, because I also want to run tests using my IDE and with wallaby.js.

I do not care for pupeteer, instead I prefer to run integration test style tests using jest and testing-library. An official testing-library/stencil would be awesome. testing-library/dom works partially, but not very well in many cases.

For e2e tests I am using playwright. e2e tests should not care for the frameworks used underneath.

[angelo-v]

not yet, sorry

[mmirus]

Bummer. Thanks for responding!

[angelo-v]

The main error I run into with testing library is

TypeError: MutationObserver is not a constructor

The MutationObserver seems to be missing in the mocked environment provided by newSpecPage

[angelo-v]

It seems to work with the latest stencil (4.8.0), but I did not do extensive testing yet.

[angelo-v]

not quite... 😞 #5252

[marksy]

I'm working on a Stencil project and a component is using a custom decorator (@ ResponsiveCssClasses()) to apply responsive classNames to a component:

export class MyTable {
    @Element() @ResponsiveCssClasses() hostEl: HTMLMyTableElement;
...

When I run the tests, I get a failure:

    ReferenceError: _hostEl_decorators is not defined

Unsure if this is Jest causing this issue (if so, if it's an older version of Jest), or if it's just the component 🤔

[louis-bompart]

Hey @marksy , prolly related to that: #3831.
TL;DR: Stencil does not really support custom decorators for now.

[danyball]

Hey guys,
are you running your test on different browsers? If yes, how? Thanks!

[christian-bromann]

Hey @danyball 👋 currently you can run e2e tests with Puppeteer. It technically would allow you to run tests on Chrome and Firefox but it doesn't seem the Stencil config allows for that. The Stencil team is currently looking into re-evaluating Stencils testing approach and we will have some updates on it soon. In the meantime I can recommend maybe take a look at WebdriverIO which has support for Stencil component test.

[danyball]

Thanks for your answer! Maybe there is another simple solution between "new stencil testing approach" and "WebdriverIO". There is a puppeteer config which lets puppeteer run FF: https://pptr.dev/faq#q-what-is-the-status-of-cross-browser-support
Cant see why this is not wanted by Stencil?!

[christian-bromann]

Hey @danyball , our design goal our is to allow arbitrary testing tools to be used, including Puppeteer.