Error when testing with @sveltejs/enhanced-img

[18thletter]

I'm not sure if this is an issue with Sveltekit, vitest, testing-library/svelte, but I'd love some help on it.

I'm getting this error when trying to render any component with a Sveltekit enhanced-img on the component:

 FAIL  src/lib/enhanced-img-test.spec.ts > renders
TypeError: Cannot read properties of undefined (reading 'split')
 ❯ split_srcset node_modules/svelte/src/runtime/internal/utils.js:99:16
     98|  const urls = split_srcset(srcset || '');
     99|
    100|  return (
       |               ^
    101|   urls.length === element_urls.length &&
    102|   urls.every(
 ❯ Module.srcset_url_equal node_modules/svelte/src/runtime/internal/utils.js:108:23
 ❯ Object.hydrate [as h] src/lib/enhanced-img-test.svelte:45:31
 ❯ Object.create [as c] src/lib/enhanced-img-test.svelte:29:9
 ❯ Module.init node_modules/svelte/src/runtime/internal/Component.js:154:31
 ❯ new Enhanced_img_test src/lib/enhanced-img-test.svelte:106:25
 ❯ mount node_modules/@testing-library/svelte/src/core/legacy.js:25:21
 ❯ Module.render node_modules/@testing-library/svelte/src/pure.js:72:21
 ❯ src/lib/enhanced-img-test.spec.ts:8:3

The component in question looks like this:

<div>
	<enhanced:img src="$lib/assets/testimage.jpg" />
</div>

Here's a repo with a minimal repro: https://github.com/18thletter/enhanced-img-vitest

Clone and run npm run test.

[mcous]

Swapping the environment from happy-dom to jsdom in your reproduction repository fixes the issue on my machine. This is likely a bug in either Svelte itself, happy-dom, or both.

In general, I've found jsdom to be the slower but more reliable choice for fake Node.js DOMs. You may also want to consider Vitest's new browser mode to run these test in a real browser, which will likely be the most reliable testing choice (sacrificing speed)

[18thletter]

Thank you, @mcous!