Testing in Lit Vs React

I noticed in the docs that for react there is a section about automated UI testing but this does not exist for the lit docs. Is there a recommend testing strategy for hilla with lit?

@cheerful-baboon, do you know if the same Reactr-based approach works with Lit?

There’s no official recommendation for testing Hilla with Lit as of yet. I briefly spent some time looking into a basic setup, basically converting what has been done in the React guide for Lit. If you already have a test setup, you might actually have more insights than I do.

That being said, here’s what I came up with:

  • Use vitest as test runner, as that allows reusing the extensive vite configuration that comes with Hilla projects
  • When using Vaadin components, you want to test in an actual browser instead of using jsdom, so use @vitest/browser.
  • @open-wc/testing-helpers has useful helpers for rendering Lit components during tests and automatically cleans up the DOM after tests.
  • testing-library/dom works for querying the DOM in a sensible manner for applications (by role, label, text, etc.). One disclaimer is that it doesn’t support shadow DOM. If your application heavily uses components with shadow DOM, then accessing the elements that you want to test becomes a real pain. I do not mean Vaadin components here, which usually have the stuff that you want to access in the light DOM, but rather breaking down your application views into sub-components and using shadow DOM for those. I saw some smaller libraries that try to deal with querying nested shadow DOMs, but not sure what can be recommended.

Here is the repo with my results so far: https://github.com/sissbruecker/hilla-lit-test-setup