Update vitest, configure tests to run in chromium

[rsilivestr]

This PR allows to run tests without system-wide Chrome browser installation.

Resolves #54

[CLAassistant]

All committers have signed the CLA.

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	vitest@​3.2.4 ⏵ 4.1.2	+1		+1
	@​vitest/​browser@​3.2.4 ⏵ 4.1.2	+2		-1	+1
	@​vitest/​browser-playwright@​4.1.2

View full report

[pimterry]

If you have a second can you sign the CLA above? Looks like you'll need to update the email used in your git commits to match your GitHub account first.

On a more practical note, this causes issues on my machine (Linux Mint) with these changes I get failures:

> react-reverse-portal@2.3.0 test
> vitest --run

Testing types with tsc and vue-tsc is an experimental feature.
Breaking changes might not follow SemVer, please pin Vitest's version when using it.

 RUN  v4.1.1 /home/tim/Dropbox/programming/http toolkit/react-reverse-portal

14:44:45 [vite] (client) Re-optimizing dependencies because lockfile has changed
 ❯  chromium  tests/svg.test.tsx (5 tests | 1 failed) 129ms
   ✓ all stories have tests 1ms
   ✓ WorksWithSVGs 11ms
   ✓ CanMoveContentAroundWithinSVGs 14ms
   × PersistDOMWhileMovingWithinSVGs 89ms
   ✓ CanPassAttributesOptionToCreateSvgPortalNode 13ms
 ❯  chromium  tests/html.test.tsx (12 tests | 1 failed) 1028ms
   ✓ all stories have tests 1ms
   ✓ RenderThingsInDifferentPlaces 11ms
   ✓ ExampleFromREADME 2ms
   ✓ PortalContainerElementAsSpanInParagraph 1ms
   ✓ SwapNodesBetweenDifferentLocations 15ms
   ✓ CanPassAttributesOptionToCreateHtmlPortalNode 14ms
   ✓ PortalContainerElementAsTr 14ms
   ✓ PersistComponentStateWhilstMoving 35ms
   ✓ CanSetPropsRemotelyWhilstMoving 37ms
   ✓ CanSwitchBetweenPortalsSafely 55ms
   ✓ RendersReliablyEvenWithFrequentChangesAndMultiplePortals  770ms
   × PersistDOMWhilstMoving 72ms

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 2 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL   chromium  tests/html.test.tsx > PersistDOMWhilstMoving
 FAIL   chromium  tests/svg.test.tsx > PersistDOMWhileMovingWithinSVGs
Error: Video failed to load: DEMUXER_ERROR_NO_SUPPORTED_STREAMS: FFmpegDemuxer: no supported streams
 ❯ HTMLVideoElement.onError tests/test-utils.ts:22:13
     20|     const onError = (e: Event) => {
     21|       cleanup();
     22|       reject(new Error(`Video failed to load: ${(e.target as HTMLVideoElement)?.error?.message || 'unknown error'}`));
       |             ^
     23|     };
     24|

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/2]⎯


 Test Files  2 failed (2)
      Tests  2 failed | 15 passed (17)
Type Errors  no errors
   Start at  14:44:45
   Duration  3.18s (transform 0ms, setup 1.21s, import 180ms, tests 1.16s, environment 0ms)

All passes fine for me on main.

Any idea why? If this is now using the bundled Chromium, I would've expected identical results in Linux CI here and on my local machine.

[rsilivestr]

I wondered why CLA status didn't update... so this is email mismatch. Will fix it soon.

Seems like chromium binary does not include necessary codecs. Yet it works for me somehow. Have you updated playwright browsers before running tests (npx playwright install)?

[rsilivestr]

Ran tests on Ubuntu 20.04 and Windows 10. In both cases all tests passed.

[rsilivestr]

Okay. Figured it out. playwright@1.55.1 comes with Chromium 140.0.7339.186 (playwright build v1193) which misses necessary codecs. But since the project has no lockfile playwright@^1.55.1 resolves to latest minor version which is 1.58.2 as of now. It installs Chrome for Testing 145.0.7632.6 (playwright chromium v1208) which runs tests correctly.

Updated required playwright version. Should work now.

Also, is it a good idea to add npx playwright install chromium to presest script?

[pimterry]

Also, is it a good idea to add npx playwright install chromium to presest script?

Good idea 👍

Okay. Figured it out. playwright@1.55.1 comes with Chromium 140.0.7339.186 (playwright build v1193) which misses necessary codecs. But since the project has no lockfile playwright@^1.55.1 resolves to latest minor version which is 1.58.2 as of now. It installs Chrome for Testing 145.0.7632.6 (playwright chromium v1208) which runs tests correctly.

Makes sense! Clearing node modules & reinstalling worked for me, but this is better.

Happy to merge with the pretest script