test: 修复浏览器换行检查的 React 运行时冲突

scripts/check-text-newlines-browser.mjs

@@ -28,12 +28,16 @@ try {
   server = await createServer({
     root, configFile: false,
     server: { host: '127.0.0.1', port: 0, strictPort: true },
-    resolve: { alias: [
-      { find: /^(?:.*\/)?primitive-adapter\.ts$/, replacement: resolve(root, 'src/client/standalone/primitive-adapter.tsx') },
-      { find: /^react$/, replacement: resolve(root, 'node_modules/react/index.js') },
-      { find: /^react\/jsx-runtime$/, replacement: resolve(root, 'node_modules/react/jsx-runtime.js') },
-      { find: /^react-dom\/client$/, replacement: resolve(root, 'node_modules/react-dom/client.js') },
-    ] },
+    resolve: {
+      dedupe: ['react', 'react-dom'],
+      alias: [
+        { find: /^(?:.*\/)?primitive-adapter\.ts$/, replacement: resolve(root, 'src/client/standalone/primitive-adapter.tsx') },
+      ],
+    },
+    optimizeDeps: {
+      include: ['react', 'react/jsx-runtime', 'react/jsx-dev-runtime', 'react-dom', 'react-dom/client'],
+      force: true,
+    },
   })
   await server.listen()
   const address = server.httpServer.address()
@@ -49,8 +53,21 @@ try {
   await writeFile(join(out, 'page.html'), stdout)
   await writeFile(join(out, 'browser.log'), stderr)
   const raw = /<pre id="results">([^<]*)<\/pre>/.exec(stdout)?.[1]
-  if (raw === undefined || raw === 'pending') throw new Error('Browser fixture did not finish; inspect page.html and browser.log')
-  const results = JSON.parse(raw.replaceAll('&quot;', '"').replaceAll('&#39;', "'").replaceAll('&lt;', '<').replaceAll('&gt;', '>').replaceAll('&amp;', '&'))
+  const browserErrors = /<pre id="browser-errors">([\s\S]*?)<\/pre>/.exec(stdout)?.[1]
+  /** 解码 Chromium dump-dom 输出的 HTML 文本。 */
+  const decodeBrowserText = value => value
+    .replaceAll('&quot;', '"')
+    .replaceAll('&#39;', "'")
+    .replaceAll('&lt;', '<')
+    .replaceAll('&gt;', '>')
+    .replaceAll('&amp;', '&')
+  const errorSummary = browserErrors === undefined ? '' : decodeBrowserText(browserErrors).trim().slice(0, 2000)
+  if (raw === undefined || raw === 'pending') {
+    const detail = errorSummary === '' ? 'inspect page.html and browser.log' : `Browser errors:\n${errorSummary}`
+    throw new Error(`Browser fixture did not finish; ${detail}`)
+  }
+  if (errorSummary !== '') throw new Error(`Browser reported client errors:\n${errorSummary}`)
+  const results = JSON.parse(decodeBrowserText(raw))
   await writeFile(join(out, 'results.json'), JSON.stringify(results, null, 2) + '\n')
   if (results.length !== 118) throw new Error(`Expected 118 initial/repeated-control layout checks, got ${results.length}`)
   const failed = results.filter(result => !result.pass)

tests/browser/text-newlines.html

@@ -1 +1,21 @@
-<!doctype html><html><head><meta charset="UTF-8"><title>Issues 249 and 280 browser regressions</title><style>body{margin:24px;font-family:Arial,sans-serif}#fixtures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.case{border:1px solid #bbb;padding:12px;min-width:0}.case.table-geometry{grid-column:1/-1;width:540px}.case>header{font-size:11px;color:#555;margin-bottom:6px}#results{display:none}</style></head><body><h1>Browser layout regressions</h1><div id="root"></div><pre id="results">pending</pre><script type="module" src="/tests/browser/text-newlines.tsx"></script></body></html>
+<!doctype html><html><head><meta charset="UTF-8"><title>Issues 249 and 280 browser regressions</title><style>body{margin:24px;font-family:Arial,sans-serif}#fixtures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.case{border:1px solid #bbb;padding:12px;min-width:0}.case.table-geometry{grid-column:1/-1;width:540px}.case>header{font-size:11px;color:#555;margin-bottom:6px}#results{display:none}</style></head><body><h1>Browser layout regressions</h1><div id="root"></div><pre id="results">pending</pre><pre id="browser-errors"></pre><script>
+  const browserErrors = document.getElementById('browser-errors')
+
+  /** 记录浏览器异常，方便从 CI 产物中查看页面错误。 */
+  function recordBrowserError(message) {
+    browserErrors.textContent += `${message}\n`
+  }
+
+  window.addEventListener('error', event => {
+    recordBrowserError(`error: ${event.message} (${event.filename}:${event.lineno}:${event.colno})`)
+  })
+  window.addEventListener('unhandledrejection', event => {
+    recordBrowserError(`unhandledrejection: ${String(event.reason)}`)
+  })
+
+  const originalConsoleError = console.error.bind(console)
+  console.error = (...values) => {
+    recordBrowserError(`console.error: ${values.map(String).join(' ')}`)
+    originalConsoleError(...values)
+  }
+</script><script type="module" src="/tests/browser/text-newlines.tsx"></script></body></html>

tests/browser/text-newlines.tsx

@@ -1,5 +1,6 @@
 /** Synthetic real-renderer regression for #249. No host or model service. */
 import { createRoot } from 'react-dom/client'
+import { flushSync } from 'react-dom'
 import { GenuiBlock } from '../../src/client/GenuiBlock.tsx'
 import css from '../../src/client/GenuiBlock.module.css'
 import { STANDALONE_THEME_CSS } from '../../src/client/artifact/standalone-theme.ts'
@@ -86,16 +87,24 @@ cases.push({
   selector: '', expected: '', whiteSpace: '', detailWhitespace: true,
 })
 
-createRoot(document.getElementById('root')!).render(
-  <div id="fixtures">
-    {cases.map((item, index) => (
-      <section className={`case${item.tableGeometry ? ' table-geometry' : ''}`} key={index} data-case={index}>
-        <header>{item.name}</header>
-        <GenuiBlock spec={{ items: [item.node] }} />
-      </section>
-    ))}
-  </div>,
-)
+const root = createRoot(document.getElementById('root')!)
+flushSync(() => {
+  root.render(
+    <div id="fixtures">
+      {cases.map((item, index) => (
+        <section className={`case${item.tableGeometry ? ' table-geometry' : ''}`} key={index} data-case={index}>
+          <header>{item.name}</header>
+          <GenuiBlock spec={{ items: [item.node] }} />
+        </section>
+      ))}
+    </div>,
+  )
+})
+
+const mountedFixtures = document.querySelectorAll('#fixtures > .case').length
+if (mountedFixtures !== cases.length) {
+  throw new Error(`React fixture mount incomplete: expected ${cases.length}, got ${mountedFixtures}`)
+}
 
 /** Character ranges measure actual painted line boxes, including rich text. */
 function measure(phase: string) {