I recently rebuilt a moderately sized jQuery application/component using Lit, with the end result being 6-7 components spread over around 2,000 lines of code.
We currently have no automated testing at all but I’d like to implement it, especially now as the markup/styles have been moved into JavaScript. It’s much better overall - but it feels riskier.
But I have no idea where to even begin. Do I set up end to end tests using Playwright on site? Can I test the components individually? Keeping in mind as well that we don’t use a build system/any sort of CI.
Just wanted to get people’s thoughts/experiences here.
I’d go ahead with cypress, both for e2e testing (whole app at once, component integration etc) and component testing (testing components in isolation)
deleted by creator
I love Playwright. I’ve had better results (less flakiness) and better DX than with cypress. +1 for Playwright for me. Coupled with a CI that runs the tests and merge / publish only if everythings fine !
Check out storybook -> https://storybook.js.org/
People generally think of storybook as a place where you can view components in different configurations but you can reuse the “stories” for testing (in a kind of write once test everywhere kind of way)
Yeah, we use Storybook with Chromatic for visual regression testing as well. Good tool! 👍
I haven’t used lit for more than testing viability testing where I am, but I’ve had success setting up jest with some vanilla is web components and doing unit testing that way.
Give Web Test Runner a try
- runs in the browser - test in the same place you run
- extremely fast
- used by popular web components libraries like lit
