ci(rsc): test react nightly (#630)

Co-authored-by: Claude <[email protected]>

Author: hi-ogawa

.github/workflows/ci-rsc.yml

@@ -32,13 +32,14 @@ jobs:
       - run: pnpm -C packages/plugin-rsc test
 
   test-e2e:
-    name: test-rsc (${{ matrix.os }} / ${{ matrix.browser }}) ${{ matrix.rolldown == true && '(rolldown)' || '' }}
+    name: test-rsc (${{ matrix.os }} / ${{ matrix.browser }}) ${{ matrix.rolldown == true && '(rolldown)' || '' }} ${{ matrix.react_version && format('(react-{0})', matrix.react_version) || '' }}
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
         os: [ubuntu-latest, macos-latest, windows-latest]
         browser: [chromium]
         rolldown: [false]
+        react_version: [""]
         include:
           - os: ubuntu-latest
             browser: firefox
@@ -47,6 +48,12 @@ jobs:
           - os: ubuntu-latest
             browser: chromium
             rolldown: true
+          - os: ubuntu-latest
+            browser: chromium
+            react_version: canary
+          - os: ubuntu-latest
+            browser: chromium
+            react_version: experimental
       fail-fast: false
     steps:
       - uses: actions/checkout@v4
@@ -55,6 +62,13 @@ jobs:
           node-version: 22
       - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
       - run: pnpm i
+      - name: install react
+        if: ${{ matrix.react_version }}
+        run: |
+          sed -i "/^overrides:/a\  react: \"${{ matrix.react_version }}\"" pnpm-workspace.yaml
+          sed -i "/^overrides:/a\  react-dom: \"${{ matrix.react_version }}\"" pnpm-workspace.yaml
+          sed -i "/^overrides:/a\  react-server-dom-webpack: \"${{ matrix.react_version }}\"" pnpm-workspace.yaml
+          pnpm i --no-frozen-lockfile
       - run: pnpm build
       - name: install rolldown
         if: ${{ matrix.rolldown }}
@@ -63,11 +77,9 @@ jobs:
           pnpm i --no-frozen-lockfile
       - run: pnpm -C packages/plugin-rsc exec playwright install ${{ matrix.browser }}
       - run: pnpm -C packages/plugin-rsc test-e2e-ci --project=${{ matrix.browser }}
-        env:
-          TEST_ISOLATED: true
       - uses: actions/upload-artifact@v4
         if: always()
         with:
-          name: test-results-${{ matrix.os }}-${{ matrix.browser }}${{ matrix.rolldown == true && '-rolldown' || '' }}
+          name: test-results-${{ matrix.os }}-${{ matrix.browser }}${{ matrix.rolldown == true && '-rolldown' || '' }}${{ matrix.react_version && format('-react-{0}', matrix.react_version) || '' }}
           path: |
             packages/plugin-rsc/test-results

packages/plugin-rsc/e2e/basic.test.ts

@@ -923,9 +923,7 @@ function defineTest(f: Fixture) {
     expect(errors).toMatchObject([
       {
         message: expect.stringContaining(
-          f.mode === 'dev'
-            ? `Hydration failed because the server rendered HTML didn't match the client.`
-            : `Minified React error #418`,
+          f.mode === 'dev' ? `Hydration failed` : `Minified React error #418`,
         ),
       },
     ])

packages/plugin-rsc/e2e/fixture.ts

@@ -158,16 +158,25 @@ export async function setupIsolatedFixture(options: {
     filter: (src) => !src.includes('node_modules'),
   })
 
-  // setup package.json overrides
-  const packagesDir = path.join(import.meta.dirname, '..', '..')
-  const overrides = {
-    '@vitejs/plugin-rsc': `file:${path.join(packagesDir, 'plugin-rsc')}`,
-    '@vitejs/plugin-react': `file:${path.join(packagesDir, 'plugin-react')}`,
-  }
-  editFileJson(path.join(options.dest, 'package.json'), (pkg: any) => {
-    Object.assign(((pkg.pnpm ??= {}).overrides ??= {}), overrides)
-    return pkg
-  })
+  // extract workspace overrides
+  const rootDir = path.join(import.meta.dirname, '..', '..', '..')
+  const workspaceYaml = fs.readFileSync(
+    path.join(rootDir, 'pnpm-workspace.yaml'),
+    'utf-8',
+  )
+  const overridesMatch = workspaceYaml.match(
+    /overrides:\s*([\s\S]*?)(?=\n\w|\n*$)/,
+  )
+  const overridesSection = overridesMatch ? overridesMatch[0] : 'overrides:'
+  const tempWorkspaceYaml = `\
+${overridesSection}
+  '@vitejs/plugin-rsc': ${JSON.stringify('file:' + path.join(rootDir, 'packages/plugin-rsc'))}
+  '@vitejs/plugin-react': ${JSON.stringify('file:' + path.join(rootDir, 'packages/plugin-react'))}
+`
+  fs.writeFileSync(
+    path.join(options.dest, 'pnpm-workspace.yaml'),
+    tempWorkspaceYaml,
+  )
 
   // install
   await x('pnpm', ['i'], {
@@ -183,17 +192,6 @@ export async function setupIsolatedFixture(options: {
   })
 }
 
-function editFileJson(filepath: string, edit: (s: string) => string) {
-  fs.writeFileSync(
-    filepath,
-    JSON.stringify(
-      edit(JSON.parse(fs.readFileSync(filepath, 'utf-8'))),
-      null,
-      2,
-    ),
-  )
-}
-
 // inspired by
 //   https://github.com/remix-run/react-router/blob/433872f6ab098eaf946cc6c9cf80abf137420ad2/integration/helpers/vite.ts#L239
 // for syntax highlighting of /* js */, use this extension

packages/plugin-rsc/e2e/react-router.test.ts

@@ -3,8 +3,11 @@ import { expect, test } from '@playwright/test'
 import { type Fixture, useFixture } from './fixture'
 import { expectNoReload, testNoJs, waitForHydration } from './helper'
 import { readFileSync } from 'node:fs'
+import React from 'react'
 
 test.describe('dev-default', () => {
+  test.skip(/canary|experimental/.test(React.version))
+
   const f = useFixture({ root: 'examples/react-router', mode: 'dev' })
   defineTest(f)
 })
@@ -15,6 +18,8 @@ test.describe('build-default', () => {
 })
 
 test.describe('dev-cloudflare', () => {
+  test.skip(/canary|experimental/.test(React.version))
+
   const f = useFixture({
     root: 'examples/react-router',
     mode: 'dev',