feat(vitest): update to vitest 4.0

[jycouet]

Closes: #759

[changeset-bot]

🦋 Changeset detected

Latest commit: d9025e9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
sv	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[pkg-pr-new]

Open in StackBlitz

npx https://pkg.pr.new/sveltejs/cli/sv@760

npx https://pkg.pr.new/sveltejs/cli/svelte-migrate@760

commit: d9025e9

[jijiseong]

I hope this PR gets merged ASAP.

[jycouet]

I hope this PR gets merged ASAP.

You can use it via npx https://pkg.pr.new/sveltejs/cli/sv@760 in the meantime

[manuel3108]

Apart from the one comment, feel free to merge

[ahkelly]

Thank you for doing this but all these changes basically go undocumented and updating an existing install becomes a real challenge. It would be wonderful to expand the pr comments to include an upgrade guide. Most people will simply update vitest to 4 and then get a slew of errors related to vitest/browser and the head scratching begins.

Something actionable like:-

1. Upgrade to vitest 4 and vitest-browser-svelte 2
2. Remove @vitest/browser
3. Install @vitest/browser-playwright
4. Update vite.config.js to use @vitest/browser-playwright

[jycouet]

Hi,
I actually didn't consider much "upgrade vitest 3 to 4"
Today, npx sv add vitest is more for new project or project without tests that wants to add it.

Your comment let me think that you used it for an upgrade and you had a hard time and I'm sorry!

At the end of sv command we can guide people for "next steps".
That mean that we should:

• detect on what version you were?
• manage 1 to 2 to 3 to 4 ? Or "just" to latest from previous?
• Your point 1 should already be done via sv today
• Your point 2 could go in "next steps"
• Your point 3 should already be done via sv today
• Your point 4 should already be done via sv today

So maybe in next steps, we could say (if vitest was there before):

With `vitest@4`, you can now uninstall `@vitest/browser` and update usage from `@vitest/browser...` to `vitest/browser`;

What do you think?

[ahkelly]

Yeah, I mean in an ideal world there would be an sv upgrade option as you allude to in "manage 1 -> 2, 3 -> 4" but that would get quite complicated. Bottom line is without some knowledge of how vitest is setup (beyond using sv create) the user will be left not being able to upgrade to vitest 4 without problems. As you note new installations are fine, it is the only way I could decipher how to upgrade my existing install was to compare to a new fresh install.

I used npx sv add to re-add vitest and 3 & 4 did not happen thus the reason for my comment. Further you would also need to delete an obsolete vitest-setup-client.js. Also you must update vitest first before installing @vitest/browser-playwright. This is another potential gotche for some. As you can see this gets messy very fast.

[jycouet]

My guess is that if you added vitest you started using it and then you have some knowledge around the topic.
So let's help a bit...

We usually don't delete files especially that people will put stuff in vitest-setup-client.js. Maybe we can add a note on this 👍

Also you must update vitest first before installing @vitest/browser-playwright

Ha yes? Any reason for this?
Using sv we install both at the same time, it's an issue?

[ahkelly]

It seems you are confusing a new install (which is working perfectly) with an upgrade, which is what I am only referring to. I had to do all changes manually for an upgrade sv add did nothing other then re-add vitest, as I noted in vite.config.js the test object must be changed completely as it now uses @vitest/browser-playwright and the script will not do this obviously so again full directions are required.