How to trick Svelte v5 mount() function into working?

[webJose]

Hello, everyone. I have a Sveltekit project with Svelte v5. It has Vitest, jsdom and @testing-library/svelte installed and working. I can use the render() function from @testing-library/svelte without issues.

However, the project I'm working on has a lifecycle that requires me to mount the component without the use of render(): Mounting the component is done within the library code using Svelte's mount() function. I need the "real thing" because the unit test is meant to update the props of the mounted component (by calling the function I'm unit-testing) and then it must assert that the component receives them. I am planning to assert this by mounting the component, then using screen from @testing-library/svelte to check on the effect of the property change.

Well, my problem: mount() throws the error "mount(...) is not available on the server". So even though jsdome is properly set because it works in other unit tests, the code for this unit test is not fooling mount(). If anyone could help me fix this, or alternatively give me an alternative way to unit-test the property change, I would be grateful.

[ariel-salgado]

I've been facing the same problem and got this solution

The key is adding // @vitest-environment jsdom on the top of the file.

I hope this helps.

[wobsoriano]

This is the line that fixed it for me:

resolve: {
	conditions: mode === 'test' ? ['browser'] : []
}

[webJose]

Guys, apologies for the lack of response. @wobsoriano is correct. However, if you have my situation and using @testing-library/svelte, then the way to go is use the plug-in provided by the library:

// vite.config.ts
import { svelteTesting } from '@testing-library/svelte/vite';

// And simply add it to the list of plug-ins.
    ...
    plugins: [sveltekit(), svelteTesting()],