Unit Test Svelte Component { #if }

[feelinglovelynow]

I've got simple reproduction steps that only take a minute to setup and a 50 point bounty that is provided to any viable answers on a Stack Overflow question that I asked 6 days ago with no answers yet asking how to test an { #if } logic block in a Svelte component that I would love some help with please

https://stackoverflow.com/questions/77624250/unit-test-svelte-component-if

Thank you!

[mcous]

It looks like your question isn't about how to test an {#if} block, but rather how to get the coverage report to show the {#if} branch as covered when you have tested it.

Honestly, you're going to be at the mercy of the Svelte compiler and its source maps here; getting accurate coverage reporting of transpiled languages is difficult at the best of times. There's nothing this library here does to affect it: we just mount the component using the API provided to us by Svelte.

The best advice I can give you here is: try to worry less about your coverage stats! All this testing-library stuff is more integration testing than unit testing, because you're always going through the full Svelte runtime and writing to the DOM. I find code coverage to be a little less meaningful unless you really have the ability to isolate your units. I also recommend pushing as much branching logic as possible to pure JS units that you can test in isolation; try to run as little branching logic as possible inside components.

If you get better coverage reporting with newer versions of Svelte, different coverage instrumentation, and/or different test runners, I'd be curious to hear!