add vitest browser tests

Author: KurtGokhan

examples/vite/package.json

@@ -6,8 +6,10 @@
   "scripts": {
     "start": "vite",
     "build": "tsc && vite build",
+    "test": "vitest",
     "preview": "vite preview",
-    "postinstall": "msw init"
+    "postinstall": "msw init",
+    "test:browser": "vitest --workspace=vitest.workspace.ts"
   },
   "dependencies": {
     "@tanstack/react-query-devtools": "^5.66.11",
@@ -20,10 +22,14 @@
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/browser": "^3.0.7",
     "msw": "^2.7.3",
+    "playwright": "^1.50.1",
     "sass": "^1.85.1",
     "typescript": "^5.8.2",
-    "vite": "^6.2.0"
+    "vite": "^6.2.0",
+    "vitest": "^3.0.7",
+    "vitest-browser-react": "^0.1.1"
   },
   "msw": {
     "workerDirectory": "public"

examples/vite/src/App.tsx

@@ -1,11 +1,14 @@
 import { setupWorker } from 'msw/browser';
 import { useRef, useState } from 'react';
-import { CommentData, PostData, baseUrl, mockHandlers } from 'react-query-builder-example-mocks';
+import { CommentData, PostData, baseUrl, getMockHandlers } from 'react-query-builder-example-mocks';
 import './App.css';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { HttpQueryBuilder } from 'react-query-builder';
 import { queryClient } from './client';
+import './index.css';
 
-await setupWorker(...mockHandlers).start({
+await setupWorker(...getMockHandlers()).start({
   onUnhandledRequest: 'bypass',
   quiet: true,
 });
@@ -87,7 +90,7 @@ const deletePostMutation = builder.withMethod('delete').withPath('/posts/:id').w
   updater: 'delete-params-by-id',
 });
 
-function App() {
+function AppCore() {
   const [enablePrefetch, setEnablePrefetch] = useState(false);
   const [postId, setPostId] = useState<number | null>(null);
 
@@ -221,4 +224,11 @@ function PostPage({ postId, onBack }: { postId: number; onBack: () => void }) {
   );
 }
 
-export default App;
+export function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AppCore />
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
+}

examples/vite/src/main.tsx

@@ -1,16 +1,5 @@
 import { createRoot } from 'react-dom/client';
-import App from './App';
-import './index.css';
-import { QueryClientProvider } from '@tanstack/react-query';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { queryClient } from './client';
-
-const app = (
-  <QueryClientProvider client={queryClient}>
-    <App />
-    <ReactQueryDevtools initialIsOpen={false} />
-  </QueryClientProvider>
-);
+import { App } from './App';
 
 const root = createRoot(document.getElementById('root') as HTMLElement);
-root.render(app);
+root.render(<App />);

examples/vite/tests/Render.test.tsx

@@ -0,0 +1,35 @@
+import { baseUrl } from 'react-query-builder-example-mocks';
+import { expect, test } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { App } from '../src/App';
+
+beforeEach(async () => {
+  await fetch(`${baseUrl}/reset`, { method: 'POST' });
+});
+
+test('Renders the app', async () => {
+  const { getByText } = render(<App />);
+  await expect.element(getByText('Reload')).toBeInTheDocument();
+});
+
+test('Loads posts', async () => {
+  const { getByText } = render(<App />);
+  await expect.element(getByText('Loading...')).toBeInTheDocument();
+  await expect.element(getByText('0 - Exploring the Future of AI')).toBeInTheDocument();
+});
+
+test('Loads next page when clicked', async () => {
+  const { getByText } = render(<App />);
+  const loadBtn = getByText('Load next page');
+  await expect.element(loadBtn).toBeInTheDocument();
+
+  await loadBtn.click();
+  await expect.element(getByText('6 - How to Start a Successful Blog')).toBeInTheDocument();
+  await expect.element(getByText('10 - A Guide to Sustainable Living')).not.toBeInTheDocument();
+
+  await loadBtn.click();
+  await expect.element(getByText('10 - A Guide to Sustainable Living')).toBeInTheDocument();
+
+  await loadBtn.click();
+  await expect.element(getByText('Load next page')).not.toBeInTheDocument();
+});

examples/vite/tsconfig.json

@@ -18,9 +18,5 @@
     "noFallthroughCasesInSwitch": true
   },
   "include": ["src", "**/*.d.ts"],
-  "references": [
-    {
-      "path": "./tsconfig.node.json"
-    }
-  ]
+  "references": [{ "path": "./tsconfig.node.json" }, { "path": "./tsconfig.test.json" }]
 }

examples/vite/tsconfig.test.json

@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "rootDir": ".",
+    "noEmit": false,
+    "allowImportingTsExtensions": false,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsxdev",
+    "types": ["vitest/globals", "@vitest/browser/matchers", "@vitest/browser/providers/playwright"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "tests/**/*.ts", "tests/**/*.tsx"],
+  "exclude": ["node_modules", "artifacts", "examples", "website", "dist"]
+}

examples/vite/vitest.workspace.ts

@@ -0,0 +1,26 @@
+import { defineWorkspace } from 'vitest/config';
+
+export default defineWorkspace([
+  // If you want to keep running your existing tests in Node.js, uncomment the next line.
+  // 'vite.config.ts',
+  {
+    extends: 'vite.config.ts',
+    test: {
+      globals: true,
+      includeTaskLocation: true,
+      browser: {
+        enabled: true,
+        provider: 'playwright',
+        viewport: { width: 1024, height: 768 },
+        // https://vitest.dev/guide/browser/playwright
+        instances: [
+          {
+            browser: 'chromium',
+            globals: true,
+            includeTaskLocation: true,
+          },
+        ],
+      },
+    },
+  },
+]);