From 89a240f64659c328e3e3109cf2681bd26ca71c9f Mon Sep 17 00:00:00 2001 From: rootkiller6788 Date: Sat, 22 Aug 2026 01:32:49 +0800 Subject: [PATCH] Fix allstrides frontend dev proxy port and broken smoke test The CRA dev proxy (src/setupProxy.js) still targets port 8000, which was left over from the pre-migration Python backend. The TypeScript Express server listens on 8080 (see index.ts, README, Dockerfile and docker-compose.yml), so all /api calls and WebSocket upgrades fail in frontend dev mode. Point the proxy at 127.0.0.1:8080. Also fix the frontend test suite, which could not run at all: - App.test.tsx still asserted the default CRA "learn react" text that no longer exists; assert the actual landing page heading instead. - react-router-dom is pinned to v6 and axios is mapped to its CommonJS build in the jest config because react-scripts 5 uses jest 27, which cannot resolve the exports-only/ESM packaging of react-router-dom v7 and axios 1.13. The app only uses v6-compatible APIs (BrowserRouter, Routes, Route, Link, useNavigate, useParams). Verified: CI=true npx react-scripts test --watchAll=false passes and npm run build succeeds. --- .../allstrides/frontend/package-lock.json | 65 +++++++------------ examples/allstrides/frontend/package.json | 7 +- examples/allstrides/frontend/src/App.test.tsx | 6 +- .../allstrides/frontend/src/setupProxy.js | 2 +- 4 files changed, 35 insertions(+), 45 deletions(-) diff --git a/examples/allstrides/frontend/package-lock.json b/examples/allstrides/frontend/package-lock.json index 192c3cf..47b2582 100644 --- a/examples/allstrides/frontend/package-lock.json +++ b/examples/allstrides/frontend/package-lock.json @@ -7,6 +7,7 @@ "": { "name": "frontend", "version": "0.1.0", + "license": "Apache-2.0", "dependencies": { "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.1", @@ -23,7 +24,7 @@ "axios": "^1.13.2", "react": "^19.2.3", "react-dom": "^19.2.3", - "react-router-dom": "^7.12.0", + "react-router-dom": "^6.30.6", "react-scripts": "5.0.1", "typescript": "^4.9.5", "web-vitals": "^2.1.4" @@ -3971,6 +3972,15 @@ "url": "https://opencollective.com/popperjs" } }, + "node_modules/@remix-run/router": { + "version": "1.23.4", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.4.tgz", + "integrity": "sha512-q7j5geK7xs3UJSdm9/iytUNclBnLmYx1EnSeCFXHPeutdqgIMeFeHtUZgS3EhlKxdBEAu8OwtJCwmLrEzpSs7Q==", + "license": "MIT", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -14960,54 +14970,35 @@ } }, "node_modules/react-router": { - "version": "7.12.0", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.12.0.tgz", - "integrity": "sha512-kTPDYPFzDVGIIGNLS5VJykK0HfHLY5MF3b+xj0/tTyNYL1gF1qs7u67Z9jEhQk2sQ98SUaHxlG31g1JtF7IfVw==", + "version": "6.30.6", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.6.tgz", + "integrity": "sha512-5HfK7k5im7LTOB0EqCQmfvy4C13G92Ssj1VTmouTK3AJvyjKTnFuCV0vcMAD/JS+JC4DvDIBRrlAeJIFjh5VWg==", "license": "MIT", "dependencies": { - "cookie": "^1.0.1", - "set-cookie-parser": "^2.6.0" + "@remix-run/router": "1.23.4" }, "engines": { - "node": ">=20.0.0" + "node": ">=14.0.0" }, "peerDependencies": { - "react": ">=18", - "react-dom": ">=18" - }, - "peerDependenciesMeta": { - "react-dom": { - "optional": true - } + "react": ">=16.8" } }, "node_modules/react-router-dom": { - "version": "7.12.0", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.12.0.tgz", - "integrity": "sha512-pfO9fiBcpEfX4Tx+iTYKDtPbrSLLCbwJ5EqP+SPYQu1VYCXdy79GSj0wttR0U4cikVdlImZuEZ/9ZNCgoaxwBA==", + "version": "6.30.6", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.6.tgz", + "integrity": "sha512-0RHKZz7wwffvkU+2MFVT2NnjK44ssLEV+m0CAJaS2Ksmorrwj7WxH00jO0SOCW26/tINUnJHToXblDs33I38YQ==", "license": "MIT", "dependencies": { - "react-router": "7.12.0" + "@remix-run/router": "1.23.4", + "react-router": "6.30.6" }, "engines": { - "node": ">=20.0.0" + "node": ">=14.0.0" }, "peerDependencies": { - "react": ">=18", - "react-dom": ">=18" - } - }, - "node_modules/react-router/node_modules/cookie": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz", - "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==", - "license": "MIT", - "engines": { - "node": ">=18" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/express" + "react": ">=16.8", + "react-dom": ">=16.8" } }, "node_modules/react-scripts": { @@ -15906,12 +15897,6 @@ "node": ">= 0.8.0" } }, - "node_modules/set-cookie-parser": { - "version": "2.7.2", - "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz", - "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==", - "license": "MIT" - }, "node_modules/set-function-length": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", diff --git a/examples/allstrides/frontend/package.json b/examples/allstrides/frontend/package.json index 1ff4d58..81d68e0 100644 --- a/examples/allstrides/frontend/package.json +++ b/examples/allstrides/frontend/package.json @@ -22,7 +22,7 @@ "axios": "^1.13.2", "react": "^19.2.3", "react-dom": "^19.2.3", - "react-router-dom": "^7.12.0", + "react-router-dom": "^6.30.6", "react-scripts": "5.0.1", "typescript": "^4.9.5", "web-vitals": "^2.1.4" @@ -55,5 +55,10 @@ "nth-check": "^2.1.1", "postcss": "^8.4.38", "webpack-dev-server": "5.2.3" + }, + "jest": { + "moduleNameMapper": { + "^axios$": "/node_modules/axios/dist/node/axios.cjs" + } } } diff --git a/examples/allstrides/frontend/src/App.test.tsx b/examples/allstrides/frontend/src/App.test.tsx index 9a350d8..98b5454 100644 --- a/examples/allstrides/frontend/src/App.test.tsx +++ b/examples/allstrides/frontend/src/App.test.tsx @@ -21,8 +21,8 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import App from './App'; -test('renders learn react link', () => { +test('renders the AllStrides landing page', () => { render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); + const heading = screen.getByRole('heading', { name: /welcome to allstrides/i }); + expect(heading).toBeInTheDocument(); }); diff --git a/examples/allstrides/frontend/src/setupProxy.js b/examples/allstrides/frontend/src/setupProxy.js index a0a205e..c311e55 100644 --- a/examples/allstrides/frontend/src/setupProxy.js +++ b/examples/allstrides/frontend/src/setupProxy.js @@ -4,7 +4,7 @@ module.exports = function(app) { app.use( '/api', createProxyMiddleware({ - target: 'http://127.0.0.1:8000', + target: 'http://127.0.0.1:8080', changeOrigin: true, ws: true, })