fix(browser): add `magic-string` to `optimizeDeps.include`

[hi-ogawa]

Description

• closes https://github.com/vitest-dev/vitest/issues/5263

Snapshot update works inside the repository test/browser but apparently it fails when installed. I still don't fully understand the intricacy of this difference, but adding vitest > @vitest/snapshot > magic-string seems to work.

I verified manually that this fix the issue by using pnpm patch in a reproduction: https://github.com/hi-ogawa/reproductions/tree/main/vitest-5263-browser-snapshot

One thing I found is that, when running tests from test/browser, I see a few logs vite:deps new dependencies found: ... and there was previously magic-string in there, but it's now gone. There are a few more dependencies like that, so they might also cause some issues depending of usage?

Show logs with DEBUG=vite:deps

$ DEBUG=vite:deps PROVIDER=playwright pnpm -C test/browser test-fixtures basic

> @vitest/test-browser@ test-fixtures /home/hiroshi/code/others/vitest/test/browser
> vitest "basic"

  vite:deps removing old cache dir /home/hiroshi/code/others/vitest/test/browser/node_modules/.vite/deps +0ms
  vite:deps scanning for dependencies... +0ms

 DEV  v1.3.1 /home/hiroshi/code/others/vitest/test/browser
      Browser runner started at http://localhost:5173/

  vite:deps Crawling dependencies using entries: 
  vite:deps   /home/hiroshi/code/others/vitest/test/browser/test/another.test.ts
  vite:deps   /home/hiroshi/code/others/vitest/test/browser/test/basic.test.ts
  vite:deps   /home/hiroshi/code/others/vitest/test/browser/test/cjs-lib.test.ts
  vite:deps   /home/hiroshi/code/others/vitest/test/browser/test/dialog.test.ts
  vite:deps   /home/hiroshi/code/others/vitest/test/browser/test/dom.test.ts
  vite:deps   /home/hiroshi/code/others/vitest/test/browser/test/failing.snaphot.test.ts
  vite:deps   /home/hiroshi/code/others/vitest/test/browser/test/failing.test.ts
  vite:deps   /home/hiroshi/code/others/vitest/test/browser/test/logs.test.ts
  vite:deps   /home/hiroshi/code/others/vitest/test/browser/test/mocked.test.ts
  vite:deps   /home/hiroshi/code/others/vitest/test/browser/test/polyfill-lib.test.ts
  vite:deps   /home/hiroshi/code/others/vitest/test/browser/test/server-headers.test.ts
  vite:deps   /home/hiroshi/code/others/vitest/test/browser/test/snapshot.test.ts
  vite:deps   /home/hiroshi/code/others/vitest/test/browser/test/timers.test.ts
  vite:deps   /home/hiroshi/code/others/vitest/test/browser/test/utils.test.ts +0ms
  vite:deps Scan completed in 235.95ms: 
  vite:deps   @vitest/cjs-lib -> /home/hiroshi/code/others/vitest/test/browser/cjs-lib/index.js
  vite:deps   url -> /home/hiroshi/code/others/vitest/node_modules/.pnpm/[email protected]/node_modules/url/url.js +208ms
  vite:deps creating package.json in /home/hiroshi/code/others/vitest/test/browser/node_modules/.vite/deps_temp_7af21d15 +251ms
  vite:deps Dependencies bundled in 59.64ms +62ms
  vite:deps ✨ static imports crawl ended +882ms
  vite:deps ✨ using post-scan optimizer result, the scanner found every used dependency +0ms
  vite:deps creating _metadata.json in /home/hiroshi/code/others/vitest/test/browser/node_modules/.vite/deps_temp_7af21d15 +583ms
  vite:deps renaming /home/hiroshi/code/others/vitest/test/browser/node_modules/.vite/deps_temp_7af21d15 to /home/hiroshi/code/others/vitest/test/browser/node_modules/.vite/deps +0ms
  vite:deps ✨ dependencies optimized +2ms

  !!!!!! magic-string was here previously 
  vite:deps new dependencies found: pathe +191ms
  !!!!!!

  vite:deps creating package.json in /home/hiroshi/code/others/vitest/test/browser/node_modules/.vite/deps_temp_9ff37f01 +193ms
  vite:deps Dependencies bundled in 29.27ms +31ms
  vite:deps creating _metadata.json in /home/hiroshi/code/others/vitest/test/browser/node_modules/.vite/deps_temp_9ff37f01 +0ms
  vite:deps renaming /home/hiroshi/code/others/vitest/test/browser/node_modules/.vite/deps to /home/hiroshi/code/others/vitest/test/browser/node_modules/.vite/deps_temp_8648249b +0ms
  vite:deps renaming /home/hiroshi/code/others/vitest/test/browser/node_modules/.vite/deps_temp_9ff37f01 to /home/hiroshi/code/others/vitest/test/browser/node_modules/.vite/deps +1ms
  vite:deps removing cache temp dir /home/hiroshi/code/others/vitest/test/browser/node_modules/.vite/deps_temp_8648249b +0ms

  !!!!!!!!!!!!!!
  vite:deps new dependencies found: p-limit, diff-sequences +167ms
  !!!!!!!!!!!!!!

  vite:deps creating package.json in /home/hiroshi/code/others/vitest/test/browser/node_modules/.vite/deps_temp_f902e0c9 +135ms
  vite:deps Dependencies bundled in 40.18ms +42ms
  vite:deps creating _metadata.json in /home/hiroshi/code/others/vitest/test/browser/node_modules/.vite/deps_temp_f902e0c9 +0ms
  vite:deps renaming /home/hiroshi/code/others/vitest/test/browser/node_modules/.vite/deps to /home/hiroshi/code/others/vitest/test/browser/node_modules/.vite/deps_temp_6458f652 +0ms
  vite:deps renaming /home/hiroshi/code/others/vitest/test/browser/node_modules/.vite/deps_temp_f902e0c9 to /home/hiroshi/code/others/vitest/test/browser/node_modules/.vite/deps +0ms
  vite:deps removing cache temp dir /home/hiroshi/code/others/vitest/test/browser/node_modules/.vite/deps_temp_6458f652 +0ms

  !!!!!!!!!!!!!!!
  vite:deps new dependencies found: std-env, tinybench +304ms 
  !!!!!!!!!!!!!!!

  vite:deps creating package.json in /home/hiroshi/code/others/vitest/test/browser/node_modules/.vite/deps_temp_8585cd8a +261ms
  vite:deps Dependencies bundled in 114.49ms +117ms
  vite:deps removing cache dir /home/hiroshi/code/others/vitest/test/browser/node_modules/.vite/deps_temp_8585cd8a +0ms
  vite:deps ✨ delaying reload as new dependencies have been found... +117ms

  !!!!!!!!!!!!!!
  vite:deps new dependencies found: std-env, tinybench, tinyspy +38ms
  !!!!!!!!!!!!!!

  vite:deps creating package.json in /home/hiroshi/code/others/vitest/test/browser/node_modules/.vite/deps_temp_782d4a52 +39ms
  vite:deps Dependencies bundled in 56.94ms +59ms
  vite:deps creating _metadata.json in /home/hiroshi/code/others/vitest/test/browser/node_modules/.vite/deps_temp_782d4a52 +0ms
  vite:deps renaming /home/hiroshi/code/others/vitest/test/browser/node_modules/.vite/deps to /home/hiroshi/code/others/vitest/test/browser/node_modules/.vite/deps_temp_630a92d6 +1ms
  vite:deps renaming /home/hiroshi/code/others/vitest/test/browser/node_modules/.vite/deps_temp_782d4a52 to /home/hiroshi/code/others/vitest/test/browser/node_modules/.vite/deps +0ms
  vite:deps removing cache temp dir /home/hiroshi/code/others/vitest/test/browser/node_modules/.vite/deps_temp_630a92d6 +0ms

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

• [x] It's really useful if your PR references an issue where it is discussed ahead of time. If the feature is substantial or introduces breaking changes without a discussion, PR might be closed.
• [ ] Ideally, include a test that fails without this PR but passes with it.
• [ ] Please, don't make changes to pnpm-lock.yaml unless you introduce a new test example.

Tests

• [ ] Run the tests with pnpm test:ci.

Documentation

• [ ] If you introduce new functionality, document it. You can run documentation with pnpm run docs command.

Changesets

• [x] Changes in changelog are generated from PR name. Please, make sure that it explains your changes in an understandable manner. Please, prefix changeset messages with feat:, fix:, perf:, docs:, or chore:.

[netlify[bot]]

✅ Deploy Preview for fastidious-cascaron-4ded94 ready!

Name	Link
🔨 Latest commit	2728080a6aedd13bc0eb868bfd453a49f0743a75
🔍 Latest deploy log	https://app.netlify.com/sites/fastidious-cascaron-4ded94/deploys/65d8207ed7ba5a0008b37d77
😎 Deploy Preview	https://deploy-preview-5278--fastidious-cascaron-4ded94.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[hi-ogawa]

Wait... actually this inline snapshot test doesn't seem to be working.

https://github.com/vitest-dev/vitest/blob/4ff7159049e4dd63501cdf512aea3366b55691cf/test/browser/test/snapshot.test.ts#L3-L5

When changing it to expect(2).toMatchInlineSnapshot('1') and pressing "u", it says Snapshots 1 updated but the inline snapshot is not actually updated:

 RERUN  update snapshot x3

 ✓ test/snapshot.test.ts (3)
   ✓ inline snapshot
   ✓ snapshot
   ✓ file snapshot

  Snapshots  1 updated 
 Test Files  1 passed (1)
      Tests  3 passed (3)
   Start at  15:15:08
   Duration  10ms

File snapshot update is still working as we have tests here test/browser/fixtures/update-snapshot.

[hi-ogawa]

Hmm, it looks like inline snapshot doesn't update when using slowHijackESM: true, which is the case for the test/browser.

I thought this could be a sourcemap issue but it's looking okay:

• sourcemap 1
• sourcemap 2

So, maybe this is because of the renaming of __vi_inject__, etc...?

EDIT: I created a separate issue here https://github.com/vitest-dev/vitest/issues/5280.

[sheremet-va]

I wonder if we should just bundle most of our dependencies like Vite does 🤔

[hi-ogawa]

Vitest's situation might be a bit different from Vite since Vitest consists of separate packages like vitest + @vitest/... while Vite users mostly just consumes vite package.

For example, I see magic-string is a dependency of vitest, @vitest/snapshot, @vitest/coverage-v8 and @vitest/browser. I don't know how to make it work in this case. Maybe internally creating @vitest/bundled-deps package?