Cross Browser Testing your Stencil Web Component like a boss
Tags: webcomponents, karma, stencil, stenciljs
Published: 2019-02-15 17:23:27

---
title: Cross Browser Testing your Stencil Web Component like a boss
published: true
tags: web-components,karma,stencil,stenciljs
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/0*67fHwt9WyjJTRy5c)<figcaption>Photo by <a href="https://unsplash.com/@christianfregnan?utm_source=medium&amp;utm_medium=referral">Christian Fregnan</a> on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption>

[Stencil](https://stenciljs.com/) is a really great piece of software. For those who are not familiar with it, it is a “ Compiler for Web Components ”.

Stencil comes by default with tools for testing your Web Component : [Jest](https://jestjs.io/) for the testing framework, and [Puppeteer](https://pptr.dev/) for “ End-to-end ”(e2e) tests.

[Puppeteer](https://pptr.dev/) is a robust solution for driving a Chrome Headless instance, but it only works with Chrome.

If you want to support or test your Web Component in more browsers, you have two strategies :

- using a solution that drives a browser using [W3C WebDriver API](https://www.w3.org/TR/webdriver/) : [WebdriverIO](https://webdriver.io), [Nightwatch.js](http://nightwatchjs.org/) are two great solutions. The main drawback is that querying Shadow DOM is a bit tricky with these solutions, due to [bad support of Shadow DOM](https://github.com/SeleniumHQ/selenium/issues/5869) in WebDriver APIs.
- using a solution that runs your test inside a browser : [Web Component Tester](https://github.com/Polymer/tools/tree/master/packages/web-component-tester) from the Polymer team or [@open-wc/testing](https://open-wc.org/testing/) are two great solutions.

I have tested the first strategy with no success for “all browsers” supporting Web Components (with some polyfills). IE11 was the bad guy in the story…

This is the second approach I will explain in details in this blog post.

![](https://cdn-images-1.medium.com/max/1024/1*ia288m2UEvaWMsSf4ZV5pQ.png)

[Open-wc](https://open-wc.org/) is a mix of recommendations and tools for many developer’s use cases : developing, linting, testing, building, demoing, publishing. Some boilerplates are very opinionated, but for my use-case about testing, it just works ! Have a look at [their philosophy](https://open-wc.org/about/#our-philosophy).

For this tutorial, Iwill explain in details the setup for the “ Component ” boilerplate of Stencil CLI :

### **STEP 1 : generate the project**

![](https://cdn-images-1.medium.com/max/1024/1*RYC4c5olX6QbR5ObF-XfRA.png)

You should got these folders and files structure :

![](https://cdn-images-1.medium.com/max/269/1*VOBSu_-ql2W2t2_ZwWFzkw.png)

### STEP 2 : install [Open-wc](https://open-wc.org/) testing tools

After installing Yeoman and [Open-wc](https://open-wc.org/) generator, you can run it inside your Stencil project :

![](https://cdn-images-1.medium.com/max/1024/1*4esGCda5rzo_Ltr0mpq3MQ.png)

### **STEP 3 : edit test file**

The generated test file has to be updated to work with your Stencil web component.

![](https://cdn-images-1.medium.com/max/1024/1*Li1JZJOySjdJR1Cc5Mh5lw.png)

1. We import the **defineCustomElements** on line 6 exported by Stencil, and call it with window context on line 7 to register the component inside the [**CustomElementsRegistry**](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry).
2. We can start testing our Web component. [Open-wc](https://open-wc.org/) comes with very cool helpers like **“ fixture ”**. It helps you generate for each test suit an isolated component, so if each test suit is running in parallel, you don’t have side effects from one to another.
3. **Important :** Before trying querying and testing with assertions your Web Component, it has to be rendered inside the DO and you have to wait a certain amount of time. Fixture helpers has internal bindings using the powerful async/await to call a public API from Stencil, [**componentOnReady()**](https://stenciljs.com/docs/methods/) **.**

### STEP 4 : run your test locally

After running **npm install** to install all the devDependencies, build your Web Component with Stencil and launch the test, everything should be fine except for code coverage.

![](https://cdn-images-1.medium.com/max/960/1*yE_BUEUn_iTbUssf-i6irQ.png)

The default code coverage configuration of thresholds of [open-wc/testing are at 90%](https://github.com/open-wc/open-wc/blob/master/packages/testing-karma/default-settings.js#L48). You can change that by editing the **karma.conf.js** file, and configuring thresholds.

![](https://cdn-images-1.medium.com/max/1024/1*oDILaAebV0tXJCrKvi0OpQ.png)

This is not enough for our use-case, because [Istanbul](https://istanbul.js.org/), the code coverage tool used by Karma, calculates the coverage of all the files generated by Stencil compiler inside the **dist**  folder.

![](https://cdn-images-1.medium.com/max/1020/1*vR061nKlZAFOedo0zbg1WA.jpeg)

The **es2017** folder contains files used to bootstrap our Web Component, and also the Stencil runtime. Excluding these files from code coverage requires adding the following regular expressions inside **karma.conf.js**

![](https://cdn-images-1.medium.com/max/1024/1*t_hkNbWh3pxr0sPUwheVsA.png)

### STEP 5 : run your test in BrowserStack

[Open-wc](https://open-wc.org/) has a package for that, **testing-karma-bs**. It was installed during step 2. Edit the **karma.es5.bs.config.js** to edit the **name** of your project inside **BrowserStack**.

Next step, you have to setup a  **.travis.yml** file to configure your CI. (You can also do the same thing with [CircleCI](https://circleci.com/), [TeamCity](https://www.jetbrains.com/teamcity/) or [Gitlab](https://about.gitlab.com/product/continuous-integration/).)

![](https://cdn-images-1.medium.com/max/1024/1*pDrloE0SQYqDjp60teiYDA.png)

![](https://cdn-images-1.medium.com/max/301/1*ZVvyK-nAVmI_nquZKukCtg.png)

Nest step is to add two **Environment Variables** inside the setting of your Travis repository, **BROWSER\_STACK\_ACCESS\_KEY** and **BROWSER\_STACK\_USERNAME**. You can find them at the top left corner of BrowserStack dashboard.

![](https://cdn-images-1.medium.com/max/1024/1*-fm8LsY_QD_0HpA2_sUspA.png)

Last step is to launch a build and wait for results :

![](https://cdn-images-1.medium.com/max/802/1*HhefYswjPCfCRjr3W9ScmQ.png)

The default list of browsers running inside **BrowserStack** are configured inside default settings of **open-wc/testing-karma-bs/bs-settings.js**  : latest stable version of Chrome, Firefox, Safari, Edge and IE11.

You can add more browsers by adding custom launchers inside [**karma.es5.bs.config.js**](https://github.com/vogloblinsky/open-wc-stencil/blob/master/karma.es5.bs.config.js) **.**

### Real use-case : Nutrition Web Components

If you want, you can also see another implementation of [open-wc](https://open-wc.org/) testing tools inside a recent open-source project i created : [Nutrition Web Components](https://github.com/vogloblinsky/nutrition-web-components). It is a collection of two Web Components for displaying Nova and Nutri-score nutritional badges. I will use them inside a nutritional open-source project which will be online soon.

![](https://cdn-images-1.medium.com/max/646/1*mJH7gUFX6YgYef7O0wrK7g.png)<figcaption>Nova &amp; Nutri-score badges</figcaption>

### Thank you !

That’s it! I hope you enjoyed reading this post as much as I enjoyed writing it.

The final source code is available on Github :

[vogloblinsky/open-wc-stencil](https://github.com/vogloblinsky/open-wc-stencil)

_Follow me on Twitter_ [_@vogloblinsky_](https://twitter.com/vogloblinsky) _for news about Web Components._

_Thanks_ [_Wassim Chegham_](https://medium.com/u/d44026c69d50) _and_ [_Thomas Allmer_](https://twitter.com/daKmoR) _for the review._

* * *