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.

  • @[email protected]
    link
    fedilink
    English
    31 year ago

    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.

  • @burtek
    link
    English
    31 year ago

    I’d go ahead with cypress, both for e2e testing (whole app at once, component integration etc) and component testing (testing components in isolation)

    • @TMN
      link
      English
      21 year ago

      deleted by creator

  • @[email protected]
    link
    fedilink
    31 year ago

    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)

    • @mark
      link
      11 year ago

      Yeah, we use Storybook with Chromatic for visual regression testing as well. Good tool! 👍

  • @TMN
    link
    English
    2
    edit-2
    1 year ago

    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 !

  • @bennyp
    link
    English
    11 year ago

    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