test(ct): react vite router (#18601)

tests/components/ct-react-vite/package.json

@@ -10,7 +10,8 @@
   },
   "dependencies": {
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^6.4.2"
   },
   "devDependencies": {
     "@types/react": "^17.0.33",

tests/components/ct-react-vite/src/App.css

@@ -1,42 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-button {
-  font-size: calc(10px + 2vmin);
-}

tests/components/ct-react-vite/src/App.tsx

@@ -1,45 +1,20 @@
-import { useState } from 'react'
-import logo from './assets/logo.svg'
-import './App.css'
+import { Routes, Route, Link } from 'react-router-dom';
+import logo from './assets/logo.svg';
+import LoginPage from './pages/LoginPage';
+import DashboardPage from './pages/DashboardPage';
 
-function App() {
-  const [count, setCount] = useState(0)
-
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>Hello Vite + React!</p>
-        <p>
-          <button type="button" onClick={() => setCount((count) => count + 1)}>
-            count is: {count}
-          </button>
-        </p>
-        <p>
-          Edit <code>App.tsx</code> and save to test HMR updates.
-        </p>
-        <p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-          {' | '}
-          <a
-            className="App-link"
-            href="https://vitejs.dev/guide/features.html"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Vite Docs
-          </a>
-        </p>
-      </header>
-    </div>
-  )
+export default function App() {
+  return <>
+    <header>
+      <img src={logo} alt="logo" width={125} height={125} />
+      <Link to="/">Login</Link>
+      <Link to="/dashboard">Dashboard</Link>
+    </header>
+    <Routes>
+      <Route path="/">
+        <Route index element={<LoginPage />} />
+        <Route path="dashboard" element={<DashboardPage />} />
+      </Route>
+    </Routes>
+  </>
 }
-
-export default App

tests/components/ct-react-vite/src/main.tsx

@@ -1,11 +1,12 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import './assets/index.css'
-import App from './App'
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import './assets/index.css';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter><App /></BrowserRouter>
   </React.StrictMode>,
   document.getElementById('root')
 )

tests/components/ct-react-vite/src/pages/DashboardPage.tsx

@@ -0,0 +1,3 @@
+export default function DashboardPage() {
+  return <main>Dashboard</main>
+}

tests/components/ct-react-vite/src/pages/LoginPage.tsx

@@ -0,0 +1,3 @@
+export default function LoginPage() {
+  return <main>Login</main>
+}

tests/components/ct-react-vite/src/tests.spec.tsx

@@ -1,4 +1,6 @@
 import { test, expect } from '@playwright/experimental-ct-react';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
 import Button from './components/Button';
 import DefaultChildren from './components/DefaultChildren';
 import MultipleChildren from './components/MultipleChildren';
@@ -139,3 +141,12 @@ test('get textContent of the empty fragment', async ({ mount }) => {
   expect(await component.textContent()).toBe('');
   await expect(component).toHaveText('');
 });
+
+test('navigate to a page by clicking a link', async ({ page, mount }) => {
+  const component = await mount(<BrowserRouter><App /></BrowserRouter>);
+  await expect(component.getByRole('main')).toHaveText('Login');
+  await expect(page).toHaveURL('/');
+  await component.getByRole('link', { name: 'Dashboard' }).click();
+  await expect(component.getByRole('main')).toHaveText('Dashboard');
+  await expect(page).toHaveURL('/dashboard');
+});