Component testing

[SvetoslavZ99]

What is the recommended approach in general for Component testing with ui5 components for react?

I went over the docs https://ui5.github.io/webcomponents-react/v2/?path=/docs/testing-with-cypress-setup--docs,
but I could not find any "real" examples. Surely, we should not test the third party component itself, since you guys are doing that internally.

So what should we test? The integration between a couple of them with our custom logic around them ... right?

And is Playwright also supported, since it also can be used for Component testing (and honestly, playwright is way better nowadays for e2e testing, and we are using it for e2e testing already, so I would really love to not get into the situation to have Playwright for E2E, Cypress for Component testing, and Vitest + RTL for Unit testing).

[Lukas742]

Hi @SvetoslavZ99,

The ui5/webcomponents team and we already test our own components, so testing them on your side would be redundant. This is standard practice nowadays - generally, you don’t need to test components, APIs, utils, etc., coming from a library.

Which testing framework to use is entirely up to you. We went with Cypress because, at the time, Playwright didn’t fully support component testing, and our custom commands currently only support Cypress. In general, we recommend using testing solutions that run in the real DOM rather than a virtual DOM like jsdom. (Here I explained why we don’t recommend testing components that use a virtual DOM anymore.)

What you should test depends on your app, but my rule of thumb is that a test should cover a use-case or feature (behavior/integration) rather than just inflate code coverage. This article is a bit older but still very relevant and provides a good overview of what to test: How to Know What to Test by Kent C. Dodds.

[SvetoslavZ99]

Thank you for the quick answer.

I will mark it as an answer and we I will take your opinion into consideration while evaluating our whole project test toolkit.