feat: support navigate requests

[kettanaito]

Warning

Technically, a breaking change since this changes the worker script.

• Addresses Support intercepting navigate requests #1594

Changes

Supports intercepting mode: 'navigate' requests, which includes:

• Page navigation;
• Form submissions (POST/GET/etc);
• Navigation and form submissions in iframes;

Important

Service Workers cannot intercept cross-origin requests, which includes form submissions. If your form's action points to a different host, that submission will not be visible to the worker.

Todos

• Move FetchRequest to @mswjs/interceptors (fix: add FetchRequest utility interceptors#773).
• Finish the test cases.
• Add a request shape test case (exposes correct request method/URL and mode).
• Add a recipe to the docs (in HTTP > Responses).

[coderabbitai]

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat: support navigate requests' directly and clearly summarizes the main change, which involves enabling support for navigate-mode requests in MSW.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Description check	✅ Passed	The PR description clearly explains the feature being added (support for navigate requests) and relates directly to the changeset modifications.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/support-navigate-requests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/msw@2721

commit: 5775aa7

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@test/browser/rest-api/navigate.mocks.ts`:
- Around line 4-14: The test setup calls setupWorker() and invokes
worker.start() without awaiting it, causing races where the Service Worker may
not be active when tests run; change the module to await worker.start() before
attaching msw to window so interception is guaranteed — specifically, ensure the
code that calls worker.start() (the worker.start() invocation created from
setupWorker()) is awaited and only after that call completes perform
Object.assign(window, { msw: { worker, http, HttpResponse } }); keep the same
symbols (setupWorker, worker, worker.start, Object.assign(window, ...)) so the
change is localized.

In `@test/browser/rest-api/navigate.test.ts`:
- Line 52: Replace the placeholder test.fixme for the test titled "bypasses an
unhandled form submission request" with a real test that ensures an unhandled
navigation/form submission is passed through to the network: create a form in
the test page (method POST or GET, with an action that points to your test
server endpoint), do a programmatic submit or user-like click to trigger
navigation, do NOT register any route/handler that matches that navigation, then
assert the test server received the form request (inspect method, body or query)
and that the page navigated to the server response (status/response body or URL)
— implement these checks in the test replacing test.fixme so the pass-through
path is covered.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: d59b62b7-027f-4726-9344-b0378790b5f4

📥 Commits

Reviewing files that changed from the base of the PR and between b888ea0 and c14b763.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (7)

• package.json
• src/browser/utils/deserializeRequest.ts
• src/browser/utils/pruneGetRequestBody.test.ts
• src/browser/utils/pruneGetRequestBody.ts
• src/mockServiceWorker.js
• test/browser/rest-api/navigate.mocks.ts
• test/browser/rest-api/navigate.test.ts

💤 Files with no reviewable changes (3)

• src/browser/utils/pruneGetRequestBody.test.ts
• src/browser/utils/pruneGetRequestBody.ts
• src/mockServiceWorker.js