From 5701ff1e9bb20a9f0a5a6b13f3896ad95dfab2f0 Mon Sep 17 00:00:00 2001
From: Max Schmitt <max@schmitt.mx>
Date: Thu, 1 Jun 2023 01:33:48 +0200
Subject: [PATCH] chore: do not always return 200 on component testing network
 requests (#23408)

Fixes https://github.com/microsoft/playwright/issues/23364

See here about their AppTypes:
https://vitejs.dev/config/shared-options.html#apptype
---
 packages/playwright-ct-core/src/vitePlugin.ts     |  2 ++
 tests/components/ct-react17/tests/render.spec.tsx | 13 +++++++++++++
 2 files changed, 15 insertions(+)

diff --git a/packages/playwright-ct-core/src/vitePlugin.ts b/packages/playwright-ct-core/src/vitePlugin.ts
index 03a3e6a199..5ed8e2fa4c 100644
--- a/packages/playwright-ct-core/src/vitePlugin.ts
+++ b/packages/playwright-ct-core/src/vitePlugin.ts
@@ -109,6 +109,8 @@ export function createPlugin(
 
       viteConfig.root = rootDir;
       viteConfig.preview = { port, ...viteConfig.preview };
+      // Vite preview server will otherwise always return the index.html with 200.
+      viteConfig.appType = viteConfig.appType || 'custom';
 
       // React heuristic. If we see a component in a file with .js extension,
       // consider it a potential JSX-in-JS scenario and enable JSX loader for all
diff --git a/tests/components/ct-react17/tests/render.spec.tsx b/tests/components/ct-react17/tests/render.spec.tsx
index c46972f136..9795e753a9 100644
--- a/tests/components/ct-react17/tests/render.spec.tsx
+++ b/tests/components/ct-react17/tests/render.spec.tsx
@@ -59,3 +59,16 @@ testWithServer(
     await expect.soft(component).toHaveText('intercepted');
   }
 );
+
+test('should return 404 if server does not handle the request', async ({ page }) => {
+  test.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/23364' });
+  const helloPromise = page.waitForResponse('/hello');
+  const statusCode = await page.evaluate(async () => {
+    const response = await fetch('/hello');
+    return response.status;
+  });
+  expect(statusCode).toBe(404);
+  const response = await helloPromise;
+  expect(response.status()).toBe(404);
+  expect(response.statusText()).toBe('Not Found');
+});