To run the unit tests for the components, run:

npm test

Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component).

## Findings on the using testing library on stencil web components

In this repository, test-button component has been built as a stencil web component and applied testing library on button component to perform basic unit testing.

- Although stencil officially uses jest for their unit testing, there is no official support for stencil web components from the testing library.

- Another reason for not directly using the testing library is that Jest's default environment is jsdom, which is used to generate a browser-like environment within the tests. Stencil, on the other hand, develops its own environment that Jest uses instead, complete with its own mocked DOM. As a result, newSpecPage, which is imported from the stencil/testing library, must be used to generate the DOM.

- We can access document, window, and other objects via the page object, after which we can use the testing library and its API, such as getByText, fire events, and so on.

- Because stencil has a different component lifecycle than react, we can't use the testing-library to mount components, hence we have to utilise the stencil testing package exclusively for mounting and re-rendering parts. Another factor is the fact that shadow DOM works differently than other DOMS.

- Everything appears to be running smoothly with the testing library, and the unit test cases are performing as expected.

- The conclusion is that we can use the testing library for stencil and the mounting is handled by the stencil official package. Given the varying lifecycle of stencil and use of shadow dom, there are multiple ways to mount without utilising @stencil/testing. However the unit testing code will be centralised within the ecosystem by using the Testing library API.

- Disadvantage of using JSDom as part of Testing library is

> "When Stencil was initially introduced, it came with testing batteries included. The stencil team quite rightfully chose Jest as its test runner, and opted for the JSDom that was included with Jest as a rendering engine for the components. A TestWindow utility was introduced that wrapped JSDom and initialized it with Stencil components. Sadly, this turned out not to be a smooth path.
>
> JSDom is mocking browser APIs in node which makes it fast and reliable, but it also means that not everything you would expect in a browser environment exists. While JSDom is constantly updated according to browser specs, it is not always catching up. A main issue was still an open one is support for web components APIs. And since stencil is a, well, web components compiler, this problem became a real hurdle in testing with JSDom."

as mentioned in https://tally-b.medium.com/unit-testing-stenciljs-1-0-c4e902a4e63c