Lit-element: unit testing

[engiNisha]

how to unit test the element?
please suggest the right way to do that with all mock methods with complex component

[daKmoR]

hey, for unit testing I wrote a "little" article that should give you all the right ideas
https://dev.to/open-wc/testing-workflow-for-web-components-g73

it uses https://open-wc.org/testing :muscle:

PS: disclaimer - I am a maintainer of @open-wc

[engiNisha]

Thanks for quick reply. its a really nice document.One thing I just wanted to know your view about lit-element-tester what is the difference between these two.Again one thing is the lit element app starter is using web component tester so again i am confused what to use.

[web-padawan]

The web-component-tester, aka WCT, was needed previously, as it was the only test runner able to handle HTML Imports easily. Now when we use ES modules in lit-element, it enables us to choose between any mainstream developer tools, including test runners like Karma.

The downsides of WCT are that it has quite a lot dependencies - in particular, it downloads SauceConnect library, which is about 10 Mb, each time you run fresh npm install.

Also, as of today it looks like WCT is not actively maintained, at least there doesn't seem to be any progress towards (potentially more lightweight) 7.0.0 version discussed some time ago.

[engiNisha]

Thanks for the answer . One thing I just wanted to know your view about lit-element-tester.

[web-padawan]

If you mean lit-element-tester, to me it looks like it is based on the headless Chrome, and it doesn't say anything about testing on other browsers.

I strongly recommend anyone to test also on Firefox, which is easy to set up in CI environments like Travis or Circle CI, without need to have a SauceLabs or BrowserStack account. And if you have one, testing on Safari and iOS would be also very beneficial for the project.

We shouldn't stick to Chrome as the only engine we test our code against, that's the point. With Karma, there are launchers for any browser, including IE11 (which you can setup on AppVeyor).

[bzitzow]

We're having a discussion at work right now about applying Martin Fowler's test pyramid to web components.

It would seem that most tests are either component or integration tests, as at the very least a DOM integration is needed, plus the integration with lit-element, to test a component.

If a function is just pure business logic and doesn't need a component instantiation, we're moving it out of the element and into a plain javascript file (that can be unit tested directly) and the element can import that behavior.

This seems to be working well.

[rjsteinert]

@daKmoR Great work on open-wc. Reading the fixture helper helped me figure out how to make tests work in a polymer-cli generated element project. Also, I would definitely recommend the open-wc lit demos as a must read for understanding Lit Element.

[jarrodek]

Are there plans to support Sauce Labs as well?

[ashubham]

Is there any guidance here ? Has anyone tried unit testing the LitElement components ? @katejeffreys

[Westbrook]

@ashubham please check the suggestion in https://github.com/Polymer/lit-element/issues/652#issuecomment-483124038... I've had great luck with the approach therein.