#18 - add onUnhandledRequest

src/index.ts

@@ -12,6 +12,7 @@ import {
   RequestHandler,
   WebSocketHandler,
   getResponse,
+  type UnhandledRequestStrategy,
 } from 'msw'
 import {
   type WebSocketClientEventMap,
@@ -25,6 +26,7 @@ import {
 
 export interface CreateNetworkFixtureArgs {
   initialHandlers: Array<RequestHandler | WebSocketHandler>
+  onUnhandledRequest?: UnhandledRequestStrategy
 }
 
 /**
@@ -48,7 +50,6 @@ export interface CreateNetworkFixtureArgs {
  */
 export function createNetworkFixture(
   args?: CreateNetworkFixtureArgs,
-  /** @todo `onUnhandledRequest`? */
 ): [
   TestFixture<NetworkFixture, PlaywrightTestArgs & PlaywrightWorkerArgs>,
   { auto: boolean },
@@ -58,9 +59,10 @@ export function createNetworkFixture(
       const worker = new NetworkFixture({
         page,
         initialHandlers: args?.initialHandlers || [],
+        onUnhandledRequest: args?.onUnhandledRequest || 'warn',
       })
 
-      await worker.start()
+      await worker.start({onUnhandledRequest: args?.onUnhandledRequest})
       await use(worker)
       await worker.stop()
     },
@@ -74,12 +76,13 @@ export class NetworkFixture extends SetupApi<LifeCycleEventsMap> {
   constructor(args: {
     page: Page
     initialHandlers: Array<RequestHandler | WebSocketHandler>
+    onUnhandledRequest?: UnhandledRequestStrategy
   }) {
     super(...args.initialHandlers)
     this.#page = args.page
   }
 
-  public async start() {
+  public async start({ onUnhandledRequest }: { onUnhandledRequest?: UnhandledRequestStrategy } = {}) {
     // Handle HTTP requests.
     await this.#page.route(/.+/, async (route, request) => {
       const fetchRequest = new Request(request.url(), {
@@ -112,6 +115,10 @@ export class NetworkFixture extends SetupApi<LifeCycleEventsMap> {
             : undefined,
         })
         return
+      } else {
+        if (typeof onUnhandledRequest === 'function') {
+          await onUnhandledRequest(fetchRequest, { warning: console.warn, error: console.error })
+        }
       }
 
       route.continue()

tests/auto.test.ts

@@ -6,13 +6,19 @@ interface Fixtures {
   network: NetworkFixture
 }
 
+const unhandledRoutes: string[] = [];
+
 const test = testBase.extend<Fixtures>({
   network: createNetworkFixture({
     initialHandlers: [
       http.get('/resource', () => {
         return new Response('hello world')
       }),
     ],
+    onUnhandledRequest: (request) => {
+      // store unhandled routes so we can assert on them
+      unhandledRoutes.push(new URL(request.url).pathname);
+    },
   }),
 })
 
@@ -27,3 +33,17 @@ test('automatically applies the network fixture', async ({ page }) => {
 
   expect(data).toBe('hello world')
 })
+
+test("invokes the onUnhandledRequest handler", async ({
+  page,
+}) => {
+  await page.goto('/')
+
+  const data = await page.evaluate(() => {
+    return fetch('/unhandled-resource').then((response) => {
+      return; // no-op
+    })
+  })
+
+  expect(unhandledRoutes).toContain("/unhandled-resource");
+});