fix(browser): add `magic-string` to `optimizeDeps.include` by hi-ogawa · Pull Request #5278 · vitest-dev/vitest

hi-ogawa · 2024-02-23T04:21:27Z

Description

closes Can't update inline snapshot in Browser Mode #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:

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

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 · 2024-02-23T04:21:43Z

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

Name	Link
🔨 Latest commit	`2728080`
🔍 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 · 2024-02-23T06:17:01Z

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

vitest/test/browser/test/snapshot.test.ts

Lines 3 to 5 in 4ff7159

    
           test('inline snapshot', () => { 
        
             expect(1).toMatchInlineSnapshot('1') 
        
           })

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 · 2024-02-23T07:06:26Z

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:

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

EDIT: I created a separate issue here #5280.

sheremet-va · 2024-02-23T09:07:49Z

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

hi-ogawa · 2024-02-23T09:28:48Z

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?

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

ae3be83

Merge branch 'main' into fix-browser-magic-string

2728080

hi-ogawa marked this pull request as ready for review February 23, 2024 04:44

hi-ogawa mentioned this pull request Feb 23, 2024

Updating inline snapshot passes without actually updating code in Browser Mode when slowHijackESM: true #5280

Closed

6 tasks

hi-ogawa mentioned this pull request Mar 5, 2024

fix(browser): fix chai and loupe deps and silence util.inspect warning #5339

Closed

6 tasks

sheremet-va approved these changes Mar 14, 2024

View reviewed changes

sheremet-va merged commit 8f04e79 into vitest-dev:main Mar 14, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Comments

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

fix(browser): add `magic-string` to `optimizeDeps.include`#5278
sheremet-va merged 2 commits intovitest-dev:mainfrom
hi-ogawa:fix-browser-magic-string

hi-ogawa commented Feb 23, 2024 •

edited

Loading

Uh oh!

netlify bot commented Feb 23, 2024 •

edited

Loading

Uh oh!

hi-ogawa commented Feb 23, 2024 •

edited

Loading

Uh oh!

hi-ogawa commented Feb 23, 2024 •

edited

Loading

Uh oh!

sheremet-va commented Feb 23, 2024 •

edited

Loading

Uh oh!

hi-ogawa commented Feb 23, 2024 •

edited

Loading

Uh oh!

Uh oh!

Comments

Conversation

hi-ogawa commented Feb 23, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

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

Tests

Documentation

Changesets

Uh oh!

netlify bot commented Feb 23, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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

Uh oh!

hi-ogawa commented Feb 23, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hi-ogawa commented Feb 23, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sheremet-va commented Feb 23, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hi-ogawa commented Feb 23, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hi-ogawa commented Feb 23, 2024 •

edited

Loading

netlify bot commented Feb 23, 2024 •

edited

Loading

hi-ogawa commented Feb 23, 2024 •

edited

Loading

hi-ogawa commented Feb 23, 2024 •

edited

Loading

sheremet-va commented Feb 23, 2024 •

edited

Loading

hi-ogawa commented Feb 23, 2024 •

edited

Loading