chore(react): use Ionic lint and Prettier configs and replace Cypress with Playwright

react-vite/base/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

react-vite/base/.gitignore

@@ -29,3 +29,9 @@ yarn-error.log*
 
 # Optional eslint cache
 .eslintcache
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

react-vite/base/.prettierignore

@@ -0,0 +1,5 @@
+# Prettier only reads the root .gitignore, not the ones inside the native
+# projects, so ignore them here to skip Capacitor's copied web build and
+# Gradle's build output.
+android/
+ios/

react-vite/base/.vscode/extensions.json

@@ -1,5 +1,7 @@
 {
-    "recommendations": [
-        "Webnative.webnative"
-    ]
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "Webnative.webnative"
+  ]
 }

react-vite/base/eslint.config.js

@@ -1,30 +1,17 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
+import ionic from '@ionic/eslint-config/recommended.js';
+import { defineConfig } from 'eslint/config';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import globals from 'globals';
 
-export default tseslint.config(
-  { ignores: ['dist', 'cypress.config.ts'] },
+export default defineConfig([
+  { ignores: ['dist/**', 'android/**', 'ios/**', 'playwright-report/**', 'test-results/**', 'blob-report/**'] },
+  ionic,
   {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
     files: ['**/*.{ts,tsx}'],
+    extends: [reactHooks.configs.flat.recommended, reactRefresh.configs.vite],
     languageOptions: {
-      ecmaVersion: 2020,
       globals: globals.browser,
     },
-    plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
-    },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
-      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    },
   },
-)
+]);

react-vite/base/package.json

@@ -7,9 +7,14 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "test.e2e": "cypress run",
-    "test.unit": "vitest",
-    "lint": "eslint"
+    "lint": "npm run eslint && npm run prettier -- --check",
+    "lint:fix": "npm run eslint -- --fix && npm run prettier -- --write",
+    "eslint": "eslint --max-warnings 0",
+    "prettier": "prettier \"**/*.{ts,tsx}\"",
+    "test": "npm run test:unit && npm run test:e2e",
+    "test:unit": "vitest run",
+    "test:unit:watch": "vitest",
+    "test:e2e": "playwright test"
   },
   "dependencies": {
     "@ionic/react": "^9.0.0",
@@ -21,25 +26,26 @@
     "react-router-dom": "^6.30.0"
   },
   "devDependencies": {
-    "@testing-library/dom": ">=7.21.4",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^16.2.0",
-    "@testing-library/user-event": "^14.4.3",
+    "@ionic/eslint-config": "^0.5.0",
+    "@ionic/prettier-config": "^4.0.0",
+    "@playwright/test": "^1.64.1",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.3",
     "@types/react": "19.0.10",
     "@types/react-dom": "19.0.4",
     "@vitejs/plugin-legacy": "^8.0.0",
     "@vitejs/plugin-react": "^6.0.0",
-    "cypress": "^13.5.0",
-    "eslint": "^9.20.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-refresh": "^0.4.19",
-    "globals": "^15.15.0",
-    "jsdom": "^22.1.0",
+    "eslint": "^10.13.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.7",
+    "globals": "^17.13.0",
+    "jsdom": "^30.1.3",
+    "prettier": "^3.9.10",
     "terser": "^5.16.0",
     "typescript": "~5.9.0",
-    "typescript-eslint": "^8.24.0",
     "vite": "^8.0.0",
-    "vitest": "~4.0.18"
-  }
+    "vitest": "~5.0.5"
+  },
+  "prettier": "@ionic/prettier-config"
 }

react-vite/base/playwright.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig, devices } from '@playwright/test';
+
+const baseURL = 'http://localhost:5173';
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  reporter: process.env.CI ? [['github'], ['html', { open: 'never' }]] : 'list',
+  use: {
+    baseURL,
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 7'] },
+    },
+  ],
+  webServer: {
+    command: 'npm run dev -- --port 5173 --strictPort',
+    url: baseURL,
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000,
+  },
+});

react-vite/base/src/App.test.tsx

@@ -1,5 +1,7 @@
-import React from 'react';
 import { render } from '@testing-library/react';
+import React from 'react';
+import { expect, test } from 'vitest';
+
 import App from './App';
 
 test('renders without crashing', () => {

react-vite/base/src/main.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+
 import App from './App';
 
 const container = document.getElementById('root');
 const root = createRoot(container!);
 root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
-);
+  </React.StrictMode>,
+);

react-vite/base/src/setupTests.ts

@@ -1,14 +1,25 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';
+// Adds jest-dom's DOM matchers (toBeInTheDocument, toHaveTextContent, ...) to Vitest's expect.
+import '@testing-library/jest-dom/vitest';
+import { cleanup } from '@testing-library/react';
+import { afterEach } from 'vitest';
 
-// Mock matchmedia
-window.matchMedia = window.matchMedia || function() {
-  return {
+// Testing Library only cleans up automatically when Vitest globals are enabled.
+afterEach(() => {
+  cleanup();
+});
+
+// jsdom doesn't implement matchMedia, which Ionic uses for platform and dark mode checks.
+window.matchMedia =
+  window.matchMedia ||
+  function (query: string): MediaQueryList {
+    return {
       matches: false,
-      addListener: function() {},
-      removeListener: function() {}
+      media: query,
+      onchange: null,
+      addListener: () => undefined,
+      removeListener: () => undefined,
+      addEventListener: () => undefined,
+      removeEventListener: () => undefined,
+      dispatchEvent: () => false,
+    };
   };
-};

react-vite/base/vite.config.ts

@@ -1,18 +1,14 @@
-/// <reference types="vitest" />
-
-import legacy from '@vitejs/plugin-legacy'
-import react from '@vitejs/plugin-react'
-import { defineConfig } from 'vite'
+import legacy from '@vitejs/plugin-legacy';
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vitest/config';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
-    react(),
-    legacy()
-  ],
+  plugins: [react(), legacy()],
   test: {
-    globals: true,
     environment: 'jsdom',
     setupFiles: './src/setupTests.ts',
-  }
-})
+    // Playwright e2e specs live in e2e/.
+    include: ['src/**/*.test.{ts,tsx}'],
+  },
+});

react-vite/official/blank/e2e/app.spec.ts

@@ -0,0 +1,6 @@
+import { expect, test } from '@playwright/test';
+
+test('visits the app root url', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.locator('#container')).toContainText('Ready to create an app?');
+});

react-vite/official/blank/ionic.starter.json

@@ -7,6 +7,6 @@
     "www"
   ],
   "scripts": {
-    "test": "npm run build && npm run test.unit -- --watch=false && npm i --no-save concurrently && ./node_modules/.bin/concurrently \"npm run dev\" \"npm run test.e2e\" --kill-others --success first"
+    "test": "npm run lint && npm run build && npm run test:unit && npx playwright install --with-deps chromium && npm run test:e2e"
   }
 }

react-vite/official/blank/src/App.tsx

@@ -1,6 +1,7 @@
-import { Navigate, Route } from 'react-router-dom';
 import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
+import { Navigate, Route } from 'react-router-dom';
+
 import Home from './pages/Home';
 
 /* Core CSS required for Ionic components to work properly */

react-vite/official/blank/src/components/ExploreContainer.tsx

@@ -1,12 +1,15 @@
 import './ExploreContainer.css';
 
-interface ContainerProps { }
-
-const ExploreContainer: React.FC<ContainerProps> = () => {
+const ExploreContainer: React.FC = () => {
   return (
     <div id="container">
       <strong>Ready to create an app?</strong>
-      <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
+      <p>
+        Start with Ionic{' '}
+        <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">
+          UI Components
+        </a>
+      </p>
     </div>
   );
 };

react-vite/official/blank/src/pages/Home.tsx

@@ -1,4 +1,5 @@
 import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+
 import ExploreContainer from '../components/ExploreContainer';
 import './Home.css';