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');
+});