this post was submitted on 01 Jul 2023
21 points (100.0% liked)

Web Development

3454 readers
1 users here now

Welcome to the web development community! This is a place to post, discuss, get help about, etc. anything related to web development

What is web development?

Web development is the process of creating websites or web applications

Rules/Guidelines

Related Communities

Wormhole

Some webdev blogsNot sure what to post in here? Want some web development related things to read?

Heres a couple blogs that have web development related content

CreditsIcon base by Delapouite under CC BY 3.0 with modifications to add a gradient

founded 2 years ago
MODERATORS
snowe
erlingur
Ategon
21
Best practices for testing web components? (self.webdev)
submitted 1 year ago by stratts to c/webdev
6 comments fedilink hide all child comments
 

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.

all 7 comments
sorted by: hot top controversial new old
[–] burtek 3 points 1 year ago (1 children)

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

[–] [email protected] 3 points 1 year ago (1 children)

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 1 points 1 year ago

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

[–] [email protected] 3 points 1 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.

[–] TMN 2 points 1 year ago* (last edited 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 1 points 1 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