Merge pull request #1 from barclayd/feat/add-vitest

feat: add vitest

apps/web/.gitignore

@@ -3,3 +3,4 @@ node_modules/
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+/__screenshots__/

apps/web/app/routes/_index.tsx

@@ -15,5 +15,5 @@ export async function loader() {
 }
 
 export default function Home({ loaderData }: Route.ComponentProps) {
-  return <h1 className="font-sans text-2xl">{loaderData.data.id}</h1>;
+  return <h1 className="font-sans text-2xl">{loaderData?.data?.id ?? 4}</h1>;
 }

apps/web/package.json

@@ -8,7 +8,9 @@
     "lint": "bunx biome check --write .",
     "start": "react-router-serve ./build/server/index.js",
     "test": "bunx playwright test",
-    "typecheck": "react-router typegen && tsc"
+    "typecheck": "react-router typegen && tsc",
+    "test:browser": "vitest --workspace=vitest.workspace.ts",
+    "test:browser:headless": "vitest run --browser.headless"
   },
   "dependencies": {
     "@react-router/fs-routes": "^7.0.2",
@@ -26,16 +28,24 @@
     "@playwright/test": "^1.49.0",
     "@react-router/dev": "^7.0.2",
     "@tailwindcss/vite": "^4.0.0-beta.6",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/node": "^22.10.1",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/browser": "^2.1.8",
     "babel-plugin-react-compiler": "19.0.0-beta-df7b47d-20241124",
+    "playwright": "^1.49.1",
     "postcss": "^8.4.49",
     "react-router-devtools": "1.0.5",
     "tailwindcss": "^4.0.0-beta.6",
     "typescript": "^5.7.2",
-    "vite": "^6.0.3",
-    "vite-plugin-babel": "1.3.0",
-    "vite-tsconfig-paths": "^5.1.4"
+    "vite": "5.4.11",
+    "vite-plugin-babel": "^1.3.0",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^2.1.8",
+    "vitest-browser-react": "^0.0.4"
   }
 }

apps/web/playwright.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig, devices } from '@playwright/test';
 
 export default defineConfig({
-  testDir: './tests',
+  testDir: './test/e2e',
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,

apps/web/test/browser/_index.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { createRoutesStub } from 'react-router';
+import Home from '../../app/routes/_index';
+
+test('generic browser mode test', async () => {
+  const Stub = createRoutesStub([
+    {
+      path: '/',
+      Component: Home,
+      loader: () =>
+        Promise.resolve({
+          data: JSON.stringify({
+            id: 4,
+          }),
+        }),
+      action() {
+        return {
+          errors: {
+            username: 'test',
+            password: 'test',
+          },
+        };
+      },
+    },
+  ]);
+
+  render(<Stub initialEntries={['/']} />);
+
+  await waitFor(() => {
+    expect(screen.getByRole('heading', { name: '4' })).toBeVisible();
+  });
+});

apps/web/tsconfig.json

@@ -7,7 +7,7 @@
   ],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2022"],
-    "types": ["node", "vite/client"],
+    "types": ["node", "vite/client", "vitest/globals", "@vitest/browser/providers/playwright"],
     "target": "ES2022",
     "module": "ES2022",
     "moduleResolution": "bundler",

apps/web/vite.config.ts

@@ -9,8 +9,7 @@ export default defineConfig({
   plugins: [
     tailwindcss(),
     babel({
-      include: ['./app/**/*'],
-      filter: (name) => name.endsWith('tsx'),
+      filter: /\.tsx?$/,
       babelConfig: {
         presets: ['@babel/preset-typescript'],
         plugins: ['babel-plugin-react-compiler'],

apps/web/vitest.config.ts

@@ -0,0 +1,16 @@
+import tsconfigPaths from 'vite-tsconfig-paths';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  plugins: [tsconfigPaths()],
+  test: {
+    globals: true,
+    css: true,
+    coverage: {
+      all: false,
+      include: ['app/**'],
+      reporter: ['text', 'json-summary', 'json'],
+      reportOnFailure: true,
+    },
+  },
+});

apps/web/vitest.workspace.ts

@@ -0,0 +1,30 @@
+import { defineWorkspace } from 'vitest/config';
+
+const isHeadless =
+  process.argv.includes('--browser.headless') || !!process.env.CI;
+
+export default defineWorkspace([
+  {
+    extends: './vitest.config.ts',
+    optimizeDeps: {
+      include: ['react/jsx-dev-runtime'],
+    },
+    server: {
+      fs: {
+        strict: false,
+      },
+    },
+    test: {
+      includeTaskLocation: true,
+      include: ['./test/browser/*.test.tsx'],
+      name: 'browser tests',
+      browser: {
+        enabled: true,
+        headless: isHeadless,
+        name: 'chromium',
+        provider: 'playwright',
+        providerOptions: {},
+      },
+    },
+  },
+]);

package.json

@@ -1,17 +1,18 @@
 {
   "name": "swipe-move",
+  "devDependencies": {
+    "turbo": "^2.3.3",
+    "typescript": "5.5.4"
+  },
+  "packageManager": "[email protected]",
   "private": true,
   "scripts": {
     "build": "turbo build",
     "dev": "turbo dev",
     "lint": "turbo lint",
-    "test": "turbo test"
+    "test": "turbo test",
+    "test:integration": "vitest run --browser.headless"
   },
-  "devDependencies": {
-    "turbo": "^2.3.3",
-    "typescript": "5.5.4"
-  },
-  "packageManager": "[email protected]",
   "workspaces": [
     "apps/*"
   ]