How to test components using live_svelte

[queirozlc]

Hello guys, i think everyone knows that Phoenix LiveView comes with a ton of tools for testing. I want to know how can i test my components using live svelte, should i use some svelte library to test or use the same tools that already come with live view, i'm really not sure how to do?

In LiveVue, they had a module with some test utilities, shouldn't live_svelte have something like that as well?

Thanks guys 👋

[ravecat]

I would like to raise a question about testing components written with live_svelte. I migrated a part of LiveView to live_svelte and encountered errors in tests with LiveViewTest. Can someone share an approach to testing? @woutdp if you could share some tips? testing is the biggest challenge for me so far

I made an example that shows the error

Branch

git clone -b live_svetle_test_demo https://github.com/ravecat/runa.git

Run

mix setup
mix test.only

During development everything is great and the transition was almost painless, however when testing I get an error (Attempting to reconnect)

At the same time, everything works correctly in the development environment

[woutdp]

Testing is tricky as Svelte requires a browser to correctly mount the component as client side javascript needs to run. Probably your best bet is to use Cypress or something similar as that runs in your browser, but you won't be able todo it with Elixir alone.

If you use SSR it should work though.

[StephanH90]

You can use wallaby for that.

The piece of code that you underlined is the default "sorry we can't find the internet" notice that shows when liveview is not connected. That is always in your dom.

[ravecat]

@StephanH90 @woutdp Thanks, just migrated the test environment for the client side to wallaby, keep it for the history here