Skip to content

Add Playwright e2e tests for React 19 / Turbopack support - #206

Merged
infi-pc merged 10 commits into
v2from
infi-pc/react19-support-v2
Apr 19, 2026
Merged

Add Playwright e2e tests for React 19 / Turbopack support#206
infi-pc merged 10 commits into
v2from
infi-pc/react19-support-v2

Conversation

@infi-pc

@infi-pc infi-pc commented Mar 7, 2026

Copy link
Copy Markdown
Owner

Summary

  • Adds 9 Playwright test cases for the new React 19 / Turbopack async source resolution
  • Covers Next.js 16 with webpack (sync resolution) and Turbopack (async resolution)
  • Tests client components, server components, native elements (by id/className), nested elements, and debug diagnostics

Test plan

  • All 9 tests pass on chromium (pnpm exec playwright test tests/libs/next16.spec.ts --project=chromium)
  • Existing basics.spec.ts tests unaffected
  • Verify on CI with dev servers running

🤖 Generated with Claude Code

9 test cases covering Next.js 16 with webpack and Turbopack:
- Sync resolution via webpack-loader (heading, anchor)
- Async resolution via Turbopack (client components, native elements, server components, nested elements)
- Debug diagnostics verification

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@vercel

vercel Bot commented Mar 7, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
locatorjs Error Error Apr 19, 2026 10:54am

…API fallback

- Add resolveViaNextDevServer() to resolve SSR chunk sources via /__nextjs_original-stack-frames
- Cache Next.js app root resolved from SSR chunk source maps
- Expose parseDebugStack method name and raw URL for API calls
- Add window.locatorDiagnose() helper via registerDiagnose() for debugging element source resolution

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replace bare React.ReactNode with explicit import type { ReactNode } from "react"
in next-16 and next-16-turbopack to avoid pnpm dual-module resolution conflicts.
Also apply prettier to all changed runtime files.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Root cause: next/dist/styled-jsx/types/css.d.ts resolves 'react' from
pnpm's hoisted store (.pnpm/node_modules/@types/react@18.0.15), making
React@18's global namespace available. The Next.js-generated validator.ts
uses React.ReactNode from this v18 namespace, while our layouts imported
ReactNode from v19 via explicit import — structurally incompatible.

Fix: add tsconfig paths entries to force all 'react' module resolutions
in both next-16 and next-16-turbopack compilations to use the app's own
@types/react@19.2.2, preventing the v18 global namespace from polluting
the TypeScript compilation.

Also apply prettier formatting to all remaining non-conformant files in
packages/runtime and packages/shared.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…text

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
# Conflicts:
#	apps/next-16-turbopack/app/ClientProviders.tsx
#	apps/next-16-turbopack/app/components/Card.tsx
#	apps/next-16-turbopack/app/layout.tsx
#	apps/next-16-turbopack/next-env.d.ts
#	apps/next-16-turbopack/tsconfig.json
#	packages/runtime/src/adapters/react/clickSourceResolver.ts
#	packages/runtime/src/adapters/react/reactAdapter.ts
Auto-merge of origin/v2 left two copies of registerDiagnose in debug.ts,
breaking TypeScript compilation (TS2323) and Babel parsing.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- ci.yml: add ports 3352/3353 to port-wait so next-16 and
  next-16-turbopack dev servers are fully booted before Playwright runs
- next16.spec.ts: assert the resolved file path via
  __LOCATORJS_DEBUG_HISTORY__ so a regression mapping elements to the
  wrong file (or chunk URL) fails instead of passing
- playwright.config.ts: add webServer entries for both Next.js 16 apps
  with reuseExistingServer:true, so tests boot their own servers when
  none are running and reuse existing pnpm dev sessions otherwise
- clickSourceResolver.ts: remove clearComponentSourceCache no-op export
  that misrepresented capability; restore original WeakMap comment

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Different browsers traverse the React _debugOwner chain in different
orders, so the exact file the resolver returns varies (page.tsx vs
components/Card.tsx). Assert the file is inside the app source tree
instead of a specific path. Webpack tests (no debug history populated)
drop the filename assertion entirely — Confirm dialog visibility is
the meaningful signal.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
@infi-pc
infi-pc merged commit 9b1b8e6 into v2 Apr 19, 2026
7 of 8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant