fix: handler delay not being respected

packages/example/tests/playwright/specs/delay.spec.ts

@@ -0,0 +1,67 @@
+import { expect, test } from '../test';
+import { rest } from 'msw';
+
+test.describe.parallel('delay', () => {
+  test('should send mock response after specified delay in the handler', async ({
+    page,
+    worker,
+  }) => {
+    await worker.use(
+      rest.get('/api/users', (_, response, context) =>
+        response(
+          context.delay(500),
+          context.json([
+            {
+              id: 'fake',
+              firstName: 'Delayed',
+              lastName: 'Response',
+            },
+          ])
+        )
+      )
+    );
+
+    await page.goto('/users');
+
+    // Assert that loading text is still visible at 200ms
+    await page.waitForTimeout(200);
+    await expect(page.locator('text="Loading..."')).toBeVisible({ timeout: 0 });
+
+    // Assert that loading text is still visible at 400ms
+    await page.waitForTimeout(200);
+    await expect(page.locator('text="Loading..."')).toBeVisible({ timeout: 0 });
+
+    // Assert that the query has resolved by the 600ms mark (> 500ms delay)
+    await page.waitForTimeout(200);
+    await expect(page.locator('text="Delayed Response"')).toBeVisible({
+      timeout: 0,
+    });
+  });
+
+  test('should send mock response straight away if no delay has been specified in the handler', async ({
+    page,
+    worker,
+  }) => {
+    await worker.use(
+      rest.get('/api/users', (_, response, context) =>
+        response(
+          context.json([
+            {
+              id: 'fake',
+              firstName: 'Instant',
+              lastName: 'Response',
+            },
+          ])
+        )
+      )
+    );
+
+    await page.goto('/users');
+
+    // wait a little bit just to make sure DOM has had time to update
+    await page.waitForTimeout(10);
+    await expect(page.locator('text="Instant Response"')).toBeVisible({
+      timeout: 0,
+    });
+  });
+});

packages/playwright-msw/src/handler.ts

@@ -2,6 +2,7 @@ import type { Route } from '@playwright/test';
 import type { MockedResponse, RequestHandler } from 'msw';
 import { handleRequest, MockedRequest } from 'msw';
 import EventEmitter from 'events';
+import { wait } from './utils';
 
 const emitter = new EventEmitter();
 
@@ -18,8 +19,17 @@ export const handleRoute = async (route: Route, handlers: RequestHandler[]) => {
     body: postData ? Buffer.from(postData) : undefined,
   });
 
-  const handleMockResponse = ({ status, headers, body }: MockedResponse) => {
-    route.fulfill({
+  const handleMockResponse = async ({
+    status,
+    headers,
+    body,
+    delay,
+  }: MockedResponse) => {
+    if (delay) {
+      await wait(delay);
+    }
+
+    return route.fulfill({
       status,
       body: body ?? undefined,
       contentType: headers.get('content-type') ?? undefined,

packages/playwright-msw/src/utils.ts

@@ -65,3 +65,9 @@ export const convertMswPathToPlaywrightUrl = (path: Path): RegExp => {
     ].join('')
   );
 };
+
+export const wait = (delay: number): Promise<void> => {
+  return new Promise((resolve) => {
+    setTimeout(resolve, delay);
+  });
+};