Using user's vite.config.ts as entry point POC

examples/kitchen-sink/package.json

@@ -9,7 +9,8 @@
     "env:pull": "npx dotenv-vault@latest pull development .env.server",
     "env:push": "npx dotenv-vault@latest push development .env.server",
     "test": "npm run test:install-deps && DEBUG=pw:webserver playwright test --config e2e-tests/",
-    "test:install-deps": "playwright install --with-deps"
+    "test:install-deps": "playwright install --with-deps",
+    "test:unit": "vitest run"
   },
   "dependencies": {
     "@tanstack/react-query": "~4.41.0",
@@ -27,14 +28,20 @@
     "@playwright/test": "1.51.1",
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/typography": "^0.5.16",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
     "@types/chai": "^5.2.2",
     "@types/express": "^5.0.0",
     "@types/react": "^18.0.37",
     "@types/uuid": "^9.0.8",
+    "@vitest/ui": "^4.0.14",
     "@wasp.sh/wasp-app-runner": "^0.0.8",
+    "jsdom": "^27.2.0",
+    "msw": "^2.12.3",
     "prisma": "5.19.1",
     "tailwindcss": "^3.2.7",
     "typescript": "5.8.2",
-    "vite": "^7.0.6"
+    "vite": "^7.0.6",
+    "vitest": "^4.0.14"
   }
 }

examples/kitchen-sink/src/features/operations/components/Todo.test.tsx

@@ -3,7 +3,7 @@ import { screen } from "@testing-library/react";
 import { expect, test } from "vitest";
 import { type AuthUser } from "wasp/auth";
 import { getDate, getTasks } from "wasp/client/operations";
-import { mockServer, renderInContext } from "wasp/client/test";
+import { mockServer, renderInContext } from "../../../vitest/helpers";
 
 import { getMe } from "wasp/client/auth";
 import { App } from "../../../App";

examples/kitchen-sink/src/routes.generated.tsx

@@ -0,0 +1,46 @@
+// This file is auto-generated by Wasp.
+// DO NOT EDIT THIS FILE MANUALLY
+
+import { createAuthRequiredPage } from "wasp/client/auth";
+
+import { HomePage as HomePage } from './pages/HomePage'
+import { CatchAllPage as CatchAllPage } from './pages/CatchAllPage'
+import SignupPage from './features/auth/pages/Signup'
+import LoginPage from './features/auth/pages/Login'
+import { PasswordReset as PasswordResetPage } from './features/auth/pages/PasswordReset'
+import { EmailVerification as EmailVerificationPage } from './features/auth/pages/EmailVerification'
+import { RequestPasswordReset as RequestPasswordResetPage } from './features/auth/pages/RequestPasswordReset'
+import { ProfilePage as ProfilePage } from './features/auth/pages/ProfilePage'
+import { ManualSignupPage as ManualSignupPage } from './features/auth/pages/ManualSignupPage'
+import { CustomSignupPage as CustomSignupPage } from './features/auth/pages/CustomSignupPage'
+import { TasksPage as TasksPage } from './features/operations/pages/TasksPage'
+import { TaskDetailPage as TaskPage } from './features/operations/pages/TaskDetailPage'
+import { SerializationPage as SerializationPage } from './features/operations/pages/SerializationPage'
+import { JobsPage as JobsPage } from './features/jobs/pages/JobsPage'
+import { ApisPage as ApisPage } from './features/apis/pages/ApisPage'
+import { ListPage as CrudList } from './features/crud/pages/ListPage'
+import { DetailPage as CrudDetail } from './features/crud/pages/DetailPage'
+import { StreamingTestPage as StreamingPage } from './features/streaming/pages/StreamingTestPage'
+import { ChatPage as ChatPage } from './features/chat/pages/ChatPage'
+
+export const routes = {
+  HomeRoute: HomePage,
+  CatchAllRoute: CatchAllPage,
+  SignupRoute: SignupPage,
+  LoginRoute: LoginPage,
+  PasswordResetRoute: PasswordResetPage,
+  EmailVerificationRoute: EmailVerificationPage,
+  RequestPasswordResetRoute: RequestPasswordResetPage,
+  ProfileRoute: createAuthRequiredPage(ProfilePage),
+  ManualSignupRoute: ManualSignupPage,
+  CustomSignupRoute: CustomSignupPage,
+  TasksRoute: createAuthRequiredPage(TasksPage),
+  TaskRoute: createAuthRequiredPage(TaskPage),
+  SerializationRoute: SerializationPage,
+  JobsRoute: createAuthRequiredPage(JobsPage),
+  ApisRoute: ApisPage,
+  CrudListRoute: createAuthRequiredPage(CrudList),
+  CrudDetailRoute: createAuthRequiredPage(CrudDetail),
+  StreamingRoute: StreamingPage,
+  ChatRoute: createAuthRequiredPage(ChatPage),
+} as const;

examples/kitchen-sink/src/vitest/helpers.tsx

@@ -0,0 +1,92 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { cleanup, render, RenderResult } from "@testing-library/react";
+import { http, HttpResponse, JsonBodyType } from "msw";
+import { setupServer, type SetupServer } from "msw/node";
+import { ReactElement, ReactNode } from "react";
+import { BrowserRouter as Router } from "react-router-dom";
+import { afterAll, afterEach, beforeAll } from "vitest";
+import { config, HttpMethod, Route } from "wasp/client";
+import { Query } from "wasp/client/operations/rpc";
+import { serialize } from "wasp/core/serialization";
+
+export type MockQuery = <Input, Output, MockOutput extends Output>(
+  query: Query<Input, Output>,
+  resJson: MockOutput,
+) => void;
+
+export type MockApi = <Payload extends JsonBodyType>(
+  route: Route,
+  resJson: Payload,
+) => void;
+
+// Inspired by the Tanstack React Query helper:
+// https://github.com/TanStack/query/blob/4ae99561ca3383d6de3f4aad656a49ba4a17b57a/packages/react-query/src/__tests__/utils.tsx#L7-L26
+export function renderInContext(ui: ReactElement): RenderResult {
+  const client = new QueryClient();
+  const { rerender, ...result } = render(
+    <QueryClientProvider client={client}>
+      <Router>{ui}</Router>
+    </QueryClientProvider>,
+  );
+  return {
+    ...result,
+    rerender: (rerenderUi: ReactNode) =>
+      rerender(
+        <QueryClientProvider client={client}>
+          <Router>{rerenderUi}</Router>
+        </QueryClientProvider>,
+      ),
+  };
+}
+
+// PUBLIC API
+export function mockServer(): {
+  server: SetupServer;
+  mockQuery: MockQuery;
+  mockApi: MockApi;
+} {
+  const server: SetupServer = setupServer();
+
+  beforeAll(() => server.listen());
+  afterEach(() => {
+    server.resetHandlers();
+    cleanup();
+  });
+  afterAll(() => server.close());
+
+  const mockQuery: MockQuery = (query, mockData) => {
+    const route = (query as unknown as { route: Route }).route;
+    mockRoute(server, route, () => HttpResponse.json(serialize(mockData)));
+  };
+
+  const mockApi: MockApi = (route, mockData) => {
+    mockRoute(server, route, () => HttpResponse.json(mockData));
+  };
+
+  return { server, mockQuery, mockApi };
+}
+
+function mockRoute(
+  server: SetupServer,
+  route: Route,
+  responseHandler: () => Response,
+) {
+  if (!Object.values(HttpMethod).includes(route.method)) {
+    throw new Error(
+      `Unsupported query method for mocking: ${
+        route.method
+      }. Supported method strings are: ${Object.values(HttpMethod).join(", ")}.`,
+    );
+  }
+
+  const url = `${config.apiUrl}${route.path}`;
+
+  const handlers: Record<HttpMethod, Parameters<typeof server.use>[0]> = {
+    [HttpMethod.Get]: http.get(url, responseHandler),
+    [HttpMethod.Post]: http.post(url, responseHandler),
+    [HttpMethod.Put]: http.put(url, responseHandler),
+    [HttpMethod.Delete]: http.delete(url, responseHandler),
+  };
+
+  server.use(handlers[route.method]);
+}

examples/kitchen-sink/vite.config.ts

@@ -1,7 +1,12 @@
-import { defineConfig } from "vite";
+import { defaultExclude, defineConfig } from "vitest/config";
+import { wasp } from "wasp/client/vite";
 
 export default defineConfig({
-  server: {
-    open: false,
+  plugins: [wasp()],
+  test: {
+    globals: true,
+    environment: "jsdom",
+    setupFiles: ["./src/vitest/setup.ts"],
+    exclude: [...defaultExclude, "./e2e-tests/**/*"],
   },
 });

waspc/cli/exe/Main.hs

@@ -33,7 +33,6 @@ import Wasp.Cli.Command.Start (start)
 import qualified Wasp.Cli.Command.Start.Db as Command.Start.Db
 import Wasp.Cli.Command.Studio (studio)
 import qualified Wasp.Cli.Command.Telemetry as Telemetry
-import Wasp.Cli.Command.Test (test)
 import Wasp.Cli.Command.TsConfigSetup (tsConfigSetup)
 import Wasp.Cli.Command.Uninstall (uninstall)
 import Wasp.Cli.Command.WaspLS (runWaspLS)
@@ -70,7 +69,6 @@ main = withUtf8 . (`E.catch` handleInternalErrors) $ do
         ["completion:list"] -> Command.Call.BashCompletionListCommands
         ("waspls" : _) -> Command.Call.WaspLS
         ("deploy" : deployArgs) -> Command.Call.Deploy deployArgs
-        ("test" : testArgs) -> Command.Call.Test testArgs
         _unknownCommand -> Command.Call.Unknown args
 
   telemetryThread <- Async.async $ runCommand $ Telemetry.considerSendingData commandCall
@@ -122,7 +120,6 @@ main = withUtf8 . (`E.catch` handleInternalErrors) $ do
     Command.Call.BashCompletionListCommands -> runCommand bashCompletion
     Command.Call.WaspLS -> runWaspLS
     Command.Call.Deploy deployArgs -> runCommand $ deploy deployArgs
-    Command.Call.Test testArgs -> runCommand $ test testArgs
     Command.Call.Unknown _ -> printUsage >> exitFailure
   -- If sending of telemetry data is still not done 1 second since commmand finished, abort it.
   -- We also make sure here to catch all errors that might get thrown and silence them.

waspc/cli/src/Wasp/Cli/Command/Call.hs

@@ -22,7 +22,6 @@ data Call
   | BashCompletionListCommands
   | WaspLS
   | Deploy Arguments -- deploy cmd passthrough args
-  | Test Arguments -- "client" | "server", then test cmd passthrough args
   | Unknown Arguments -- all args
 
 type Arguments = [String]

waspc/data/Cli/starters/basic/vite.config.ts

@@ -1,7 +1,6 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from "vite";
+import { wasp } from "wasp/client/vite";
 
 export default defineConfig({
-  server: {
-    open: true,
-  },
-})
+  plugins: [wasp()],
+});

waspc/data/Cli/starters/minimal/vite.config.ts

@@ -1,7 +1,6 @@
 import { defineConfig } from "vite";
+import { wasp } from "wasp/client/vite";
 
 export default defineConfig({
-  server: {
-    open: true,
-  },
+  plugins: [wasp()],
 });

waspc/data/Cli/starters/skeleton/src/vite-env.d.ts

@@ -1,7 +1 @@
 /// <reference types="vite/client" />
-
-// This is needed to properly support Vitest testing with jest-dom matchers.
-// Types for jest-dom are not recognized automatically and Typescript complains
-// about missing types e.g. when using `toBeInTheDocument` and other matchers.
-// Reference: https://github.com/testing-library/jest-dom/issues/546#issuecomment-1889884843
-import "@testing-library/jest-dom";

waspc/data/Generator/templates/react-app/package.json

@@ -8,9 +8,9 @@
   {=& devDepsChunk =},
   {=& overridesChunk =},
   "scripts": {
-    "start": "vite",
-    "build": "tsc --build && vite build",
-    "preview": "vite preview"
+    "start": "vite --config ../../../vite.config.ts",
+    "build": "tsc --build && vite build --config ../../../vite.config.ts",
+    "preview": "vite preview --config ../../../vite.config.ts"
   },
   "engineStrict": true,
   "engines": {

waspc/data/Generator/templates/react-app/tsconfig.json

@@ -5,7 +5,6 @@
   // projects.
   "files": [],
   "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.vite.json" },
+    { "path": "./tsconfig.app.json" }
   ]
 }