fix(handler): add playthrough support

package.json

@@ -8,11 +8,11 @@
     ]
   },
   "scripts": {
-    "build": "yarn workspaces foreach run build",
+    "build": "yarn workspaces foreach --all run build",
     "deploy": "monodeploy --config-file  monodeploy.config.js",
     "format": "prettier --write .",
     "lint": "eslint \"**/{src,tests}/**/*\"",
-    "test": "yarn workspaces foreach run test",
+    "test": "yarn workspaces foreach --all run test",
     "postinstall": "husky install"
   },
   "devDependencies": {

packages/example/public/config.json

@@ -0,0 +1,3 @@
+{
+  "title": "real title"
+}

packages/example/src/App.tsx

@@ -8,6 +8,7 @@ import { UsersList } from './components/users-list';
 import { SettingsForm } from './components/settings-form';
 import { Documents } from './components/documents';
 import { Search } from './components/search';
+import { ConfigTitle } from './components/config-title';
 
 const queryClient = new QueryClient();
 const apolloClient = new ApolloClient({
@@ -21,6 +22,7 @@ const App: FC = () => {
       <ApolloProvider client={apolloClient}>
         <BrowserRouter>
           <Routes>
+            <Route path="/config-title" element={<ConfigTitle />} />
             <Route path="/documents/:slug" element={<Documents />} />
             <Route path="/documents" element={<Documents />} />
             <Route path="/search" element={<Search />} />

packages/example/src/components/config-title.tsx

@@ -0,0 +1,17 @@
+import { FC, useEffect, useState } from 'react';
+
+export const ConfigTitle: FC = () => {
+  const [title, setTitle] = useState('Loading title');
+
+  useEffect(() => {
+    const fetchData = async (): Promise<void> => {
+      const response = await fetch('/config.json');
+      const data = await response.json();
+      setTitle(data.title);
+    };
+
+    void fetchData();
+  }, []);
+
+  return <h1>{title}</h1>;
+};

packages/example/src/mocks/handlers.ts

@@ -3,11 +3,13 @@ import searchHandlers from './handlers/search';
 import sessionHandlers from './handlers/session';
 import usersHandlers from './handlers/users';
 import settingsHandlers from './handlers/settings';
+import configHandlers from './handlers/config';
 
 export default [
   ...documentsHandlers,
   ...searchHandlers,
   ...sessionHandlers,
   ...usersHandlers,
   ...settingsHandlers,
+  ...configHandlers,
 ];

packages/example/src/mocks/handlers/config.ts

@@ -0,0 +1,7 @@
+import { HttpResponse, http } from 'msw';
+
+export default [
+  http.get('/config.json', () =>
+    HttpResponse.json({ title: 'mocked title' }, { status: 200 }),
+  ),
+];

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

@@ -0,0 +1,40 @@
+import { HttpResponse, http, passthrough } from 'msw';
+import { test } from '../test';
+
+test.describe('passthrough', () => {
+  test('should show a custom mocked title if overridden', async ({
+    worker,
+    page,
+  }) => {
+    await worker.use(
+      http.get('/config.json', () =>
+        HttpResponse.json({ title: 'title overridden' }, { status: 200 }),
+      ),
+    );
+    await page.goto('/config-title');
+    await page.waitForSelector('text=title overridden');
+  });
+
+  test('should show mocked title if not overridden', async ({ page }) => {
+    await page.goto('/config-title');
+    await page.waitForSelector('text=mocked title');
+  });
+
+  test('should show real title when passthrough is used', async ({
+    worker,
+    page,
+  }) => {
+    await worker.use(http.get('/config.json', () => passthrough()));
+    await page.goto('/config-title');
+    await page.waitForSelector('text=real title');
+  });
+
+  test('should show real title when passthrough is used for a wildcard', async ({
+    worker,
+    page,
+  }) => {
+    await worker.use(http.get('/*onfig.json', () => passthrough()));
+    await page.goto('/config-title');
+    await page.waitForSelector('text=real title');
+  });
+});

packages/playwright-msw/src/handler.ts

@@ -36,6 +36,7 @@ export const handleRoute = async (route: Route, handlers: RequestHandler[]) => {
            */
           baseUrl: url.origin,
         },
+        onPassthroughResponse: () => route.continue(),
         onMockedResponse: async ({
           status,
           headers: rawHeaders,