chore: Vitest Browser Mode

[ntatoud]

Main goal

This PR aims to move away from JSdom for tests in a browser environment and use vitest browser mode instead.

Additional notes

On top of moving tests needing a browser environment away from jsdom, I splitted existing tests in 3 vitest projects.

1. browser => Self explanatory (matches all test names *.browser.test.*)
   For this, I had to replace the usage of some node apis in the tests since they are not polyfilled in the browser.

2. unit => For all tests that should pass in a non-browser environment. (matches all *.test.* except *.browser.test.*

3. types => For all type testings

• Updated the CI to install necessary playwright browser.
• Updated the package.json scripts to keep consistent behavior.

Pending questions:

• Should we test against all browser available with playwright (Webkit, Firefox, Chromium) or keep only Chromium as it is right now ?

[vercel]

@ntatoud is attempting to deploy a commit to the 47ng Team on Vercel.

A member of the Team first needs to authorize it.

[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/​coverage-v8@​4.0.1 ⏵ 4.0.15	+1		+1	+1
	@​vitest/​browser-playwright@​4.0.15

View full report

[franky47]

Thank you!

We can test only in chromium for those tests, there are some things which may be useful to test in Safari (detecting the default throttle rate), but we can leave that out of scope for now.

[franky47]

note: It looks like this step fails:

  pnpm exec playwright install chromium --with-deps
  shell: /usr/bin/bash -e {0}
  env:
    FORCE_COLOR: 3
    PNPM_HOME: /home/runner/setup-pnpm/node_modules/.bin
undefined
 ERR_PNPM_RECURSIVE_EXEC_FIRST_FAIL  Command "playwright" not found
Error: Process completed with exit code 254.

https://github.com/47ng/nuqs/actions/runs/19972510720/job/57284417778?pr=1254#step:6:9

Do we need to add playwright as a devDependency?

[ntatoud]

Ah yes we do, I'ma fix that

[ntatoud]

I added it in the pnpm e2e catalog like cypress since you intend to migrate to it anyway.
I also removed jsdom that was still hanging there

[franky47]

We have a different error now, on the install step:

None of the selected packages has a "bexec" script

And when the tests run (expectedly, it doesn't find the binary):

Error: browserType.launch: Executable doesn't exist at /home/runner/.cache/ms-playwright/chromium_headless_shell-1200/chrome-linux/headless_shell

[ntatoud]

We have a different error now, on the install step:
None of the selected packages has a "bexec" script

Ah my bad, it should have been exec not bexec. Nice catch, it seems to work now

[franky47]

It does, but it takes ~40s to install playwright 😭

I wonder if we could cache it, it's not recommended but surely restoring from cache would be faster (and more robust) than going through the network?

Do we also need system dependencies? GHA images contain a lot of things built-in.
Edit: looks like it comes down to 9s without the system deps, and tests still pass 🙌

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
nuqs	Error			Dec 5, 2025 11:59pm

docs:build:    Running TypeScript ...
docs:build: Failed to compile.
docs:build: 
docs:build: ./mdx-components.tsx:27:6
docs:build: Type error: Type '{ children: Element; key?: Key | null | undefined; defaultChecked?: boolean | undefined; defaultValue?: string | number | readonly string[] | undefined; suppressContentEditableWarning?: boolean | undefined; ... 274 more ...; onTransitionStartCapture?: TransitionEventHandler<...> | undefined; }' is not assignable to type 'CodeBlockProps'.
docs:build:   Types of property 'style' are incompatible.
docs:build:     Type 'React.CSSProperties | undefined' is not assignable to type 'import("/vercel/path0/node_modules/.pnpm/@[email protected]/node_modules/@types/react/index").CSSProperties | undefined'.
docs:build:       Type 'CSSProperties' is not assignable to type 'Properties<string | number, string & {}>'.
docs:build:         Types of property 'alignmentBaseline' are incompatible.
docs:build:           Type 'import("/vercel/path0/node_modules/.pnpm/[email protected]/node_modules/csstype/index").Property.AlignmentBaseline | undefined' is not assignable to type 'import("/vercel/path0/node_modules/.pnpm/[email protected]/node_modules/csstype/index").Property.AlignmentBaseline | undefined'.
docs:build:             Type '"hanging"' is not assignable to type 'AlignmentBaseline | undefined'.
docs:build: 
docs:build:   25 |   FeatureSupportMatrix,
docs:build:   26 |   pre: ({ ref: _ref, children, ...props }) => (
docs:build: > 27 |     <CodeBlock {...props}>
docs:build:      |      ^
docs:build:   28 |       <Pre>{children}</Pre>
docs:build:   29 |     </CodeBlock>
docs:build:   30 |   )
docs:build: Next.js build worker exited with code: 1 and signal: null

[franky47]

The build fails on Vercel but the error seems completely unrelated (unless it's a lockfile update cascading).

I'll review over the weekend, thanks again!

[github-actions]

🎉 This PR is included in version 2.8.4 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀