Skip to content

test(rsc): make e2e file editor async and space out writes #1489

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hi-ogawa merged 4 commits into from
Oct 5, 2026
Merged

test(rsc): make e2e file editor async and space out writes #1489

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6d5b0ae
test(rsc): make e2e file editor async and space out writes
hi-ogawa Oct 5, 2026
b819621
test(rsc): link chokidar source for 50ms change throttle
hi-ogawa Oct 5, 2026
ddc2979
Merge remote-tracking branch 'origin/main' into test/rsc-e2e-async-ed…
hi-ogawa Oct 5, 2026
e8fdf8f
test(rsc): fix chokidar permalink to point at the 3.6.0 commit
hi-ogawa Oct 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
136 changes: 78 additions & 58 deletions packages/plugin-rsc/e2e/basic.test.ts
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions packages/plugin-rsc/e2e/client-first.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,14 @@ test.describe('dev', () => {
await expect(counter).toHaveText('count: 1')

const editor = f.createEditor('src/routes/page.tsx')
editor.edit((source) =>
await editor.edit((source) =>
source.replace('client: baseline', 'client: edited'),
)

await expect(page.getByTestId('client')).toHaveText('client: edited')
await expect(counter).toHaveText('count: 1')

editor.reset()
await editor.reset()
await expect(page.getByTestId('client')).toHaveText('client: baseline')
await expect(counter).toHaveText('count: 1')
})
Expand Down
4 changes: 2 additions & 2 deletions packages/plugin-rsc/e2e/custom-server-function.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ test.describe('dev-custom-server-function', () => {
const editor = f.createEditor('src/features/mixed-directives/actions.ts')
// Switch one export from the custom plugin to the built-in plugin. HMR
// must remove the custom claim while preserving the module's other claims.
editor.edit((source) =>
await editor.edit((source) =>
source
.replace(`'use custom-server'`, `'use server'`)
.replace(
Expand All @@ -50,7 +50,7 @@ test.describe('dev-custom-server-function', () => {
).toBeVisible()

// Switch the export back and verify neither owner retained stale state.
editor.reset()
await editor.reset()
await expect(page.getByRole('button', { name: 'Custom: 0' })).toBeVisible()
await page.getByRole('button', { name: 'Built-in: 0', exact: true }).click()
await expect(
Expand Down
31 changes: 24 additions & 7 deletions packages/plugin-rsc/e2e/fixture.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,12 +159,29 @@ export function useFixture(options: {
}
}

// Wait at least 100ms between writes to the same file so Vite sees each one.
// Its watcher (chokidar) drops a `change` event within 50ms of the previous
// one for the same path, so a fast edit-then-reset could lose the reset.
// https://github.com/paulmillr/chokidar/blob/7c50e25d10a497ce4409f6e52eb630f0d7647b97/index.js#L616
const WRITE_INTERVAL_MS = 100
const lastWriteTimes = new Map<string, number>()

async function writeWatchedFile(filepath: string, content: string) {
const wait =
(lastWriteTimes.get(filepath) ?? 0) + WRITE_INTERVAL_MS - Date.now()
if (wait > 0) {
await new Promise((resolve) => setTimeout(resolve, wait))
}
fs.writeFileSync(filepath, content)
lastWriteTimes.set(filepath, Date.now())
}

export function useCreateEditor(cwd: string) {
const originalFiles: Record<string, string> = {}

test.afterAll(async () => {
for (const [filepath, content] of Object.entries(originalFiles)) {
fs.writeFileSync(filepath, content)
await writeWatchedFile(filepath, content)
}
})

Expand All @@ -175,17 +192,17 @@ export function useCreateEditor(cwd: string) {
let current = init
return {
read: () => current,
edit(editFn: (data: string) => string): void {
async edit(editFn: (data: string) => string): Promise<void> {
const next = editFn(current)
assert(next !== current, 'Edit function did not change the content')
current = next
fs.writeFileSync(filepath, next)
await writeWatchedFile(filepath, next)
},
reset(): void {
fs.writeFileSync(filepath, originalFiles[filepath]!)
async reset(): Promise<void> {
await writeWatchedFile(filepath, originalFiles[filepath]!)
},
resave(): void {
fs.writeFileSync(filepath, current)
async resave(): Promise<void> {
await writeWatchedFile(filepath, current)
},
}
}
Expand Down
6 changes: 4 additions & 2 deletions packages/plugin-rsc/e2e/react-router.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,9 @@
).toBeVisible()

const editor = f.createEditor('app/routes/about.tsx')
editor.edit((s) => s.replace('Client counter:', 'Client [edit] counter:'))
await editor.edit((s) =>
s.replace('Client counter:', 'Client [edit] counter:'),
)

await expect(
page.getByRole('button', { name: 'Client [edit] counter: 1' }),
Expand All @@ -112,7 +114,7 @@
await page.getByText('This is the home page.').click()

const editor = f.createEditor('app/routes/home.tsx')
editor.edit((s) =>
await editor.edit((s) =>
s.replace('This is the home page.', 'This is the home [edit] page.'),
)

Expand Down Expand Up @@ -147,7 +149,7 @@
// client side navigation to "/" loads "/" styles
await page.getByRole('link', { name: 'Home' }).click()
await page.waitForURL(f.url())
await expect(page.locator('.test-style-home')).toHaveCSS(

Check failure on line 152 in packages/plugin-rsc/e2e/react-router.test.ts

View workflow job for this annotation

GitHub Actions / test-rsc (macos-latest / webkit)

[webkit] › e2e/react-router.test.ts:125:3 › dev-cloudflare › server css code split 

  1) [webkit] › e2e/react-router.test.ts:125:3 › dev-cloudflare › server css code split ────────────
    Error: expect(locator).toHaveCSS(expected) failed

    Locator: locator('.test-style-home')
    Expected: "rgb(250, 150, 0)"
    Timeout: 5000ms
    Error: element(s) not found

    Call log:
      - Expect "toHaveCSS" locator('.test-style-home') with timeout 5000ms
      - waiting for locator('.test-style-home')


      150 |     await page.getByRole('link', { name: 'Home' }).click()
      151 |     await page.waitForURL(f.url())
    > 152 |     await expect(page.locator('.test-style-home')).toHaveCSS(
          |                                                    ^
      153 |       'color',
      154 |       'rgb(250, 150, 0)',
      155 |     )
        at /Users/runner/work/vite-plugin-react/vite-plugin-react/packages/plugin-rsc/e2e/react-router.test.ts:152:52
'color',
'rgb(250, 150, 0)',
)
Expand Down
16 changes: 9 additions & 7 deletions packages/plugin-rsc/e2e/starter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,13 +68,15 @@ export function defineStarterTest(
).toBeVisible()

const editor = f.createEditor(`src/client.tsx`)
editor.edit((s) => s.replace('Client Counter', 'Client [edit] Counter'))
await editor.edit((s) =>
s.replace('Client Counter', 'Client [edit] Counter'),
)
await expect(
page.getByRole('button', { name: 'Client [edit] Counter: 1' }),
).toBeVisible()

if (variant === 'no-ssr') {
editor.reset()
await editor.reset()
await page.getByRole('button', { name: 'Client Counter: 1' }).click()
return
}
Expand All @@ -83,7 +85,7 @@ export function defineStarterTest(
const res = await page.goto(f.url())
expect(await res?.text()).toContain('Client [edit] Counter')
await waitForHydration(page)
editor.reset()
await editor.reset()
await page.getByRole('button', { name: 'Client Counter: 0' }).click()
})

Expand All @@ -96,11 +98,11 @@ export function defineStarterTest(
await using _ = await expectNoReload(page)
await expect(page.getByText('Vite + RSC')).toBeVisible()
const editor = f.createEditor('src/root.tsx')
editor.edit((s) =>
await editor.edit((s) =>
s.replace('<h1>Vite + RSC</h1>', '<h1>Vite x RSC</h1>'),
)
await expect(page.getByText('Vite x RSC')).toBeVisible()
editor.reset()
await editor.reset()
await expect(page.getByText('Vite + RSC')).toBeVisible()
})
})
Expand Down Expand Up @@ -137,7 +139,7 @@ export function defineStarterTest(

await using _ = await expectNoReload(page)
const editor = f.createEditor('src/index.css')
editor.edit((s) =>
await editor.edit((s) =>
s.replace(
'.card {\n padding: 1rem;',
`.card {\n padding: 1rem; background-color: rgb(255, 0, 200);`,
Expand All @@ -146,7 +148,7 @@ export function defineStarterTest(
await expect(card).toHaveCSS('background-color', 'rgb(255, 0, 200)')

await page.waitForTimeout(100)
editor.reset()
await editor.reset()
await expect(card).not.toHaveCSS('background-color', 'rgb(255, 0, 200)')
})

Expand Down
16 changes: 8 additions & 8 deletions packages/plugin-rsc/e2e/syntax-error.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ test.describe(() => {

// add syntax error
const editor = f.createEditor('src/client.tsx')
editor.edit((s) =>
await editor.edit((s) =>
s.replace(
'<div data-testid="client-content">client:ok</div>',
'<div data-testid="client-content">client:broken<</div>',
Expand All @@ -78,7 +78,7 @@ test.describe(() => {

// fix syntax error
await page.waitForTimeout(200)
editor.edit((s) =>
await editor.edit((s) =>
s.replace(
'<div data-testid="client-content">client:broken<</div>',
'<div data-testid="client-content">client:fixed</div>',
Expand Down Expand Up @@ -113,7 +113,7 @@ test.describe(() => {

// add syntax error
const editor = f.createEditor('src/root.tsx')
editor.edit((s) =>
await editor.edit((s) =>
s.replace(
'<div data-testid="server-content">server:ok</div>',
'<div data-testid="server-content">server:broken<</div>',
Expand All @@ -123,7 +123,7 @@ test.describe(() => {

// fix syntax error
await page.waitForTimeout(200)
editor.edit((s) =>
await editor.edit((s) =>
s.replace(
'<div data-testid="server-content">server:broken<</div>',
'<div data-testid="server-content">server:fixed</div>',
Expand All @@ -145,7 +145,7 @@ test.describe(() => {
test('client ssr', async ({ page }) => {
// add syntax error
const editor = f.createEditor('src/client.tsx')
editor.edit((s) =>
await editor.edit((s) =>
s.replace(
'<div data-testid="client-content">client:ok</div>',
'<div data-testid="client-content">client:broken<</div>',
Expand All @@ -156,7 +156,7 @@ test.describe(() => {

// fix syntax error
await page.waitForTimeout(200)
editor.edit((s) =>
await editor.edit((s) =>
s.replace(
'<div data-testid="client-content">client:broken<</div>',
'<div data-testid="client-content">client:fixed</div>',
Expand All @@ -178,7 +178,7 @@ test.describe(() => {
test('server ssr', async ({ page }) => {
// add syntax error
const editor = f.createEditor('src/root.tsx')
editor.edit((s) =>
await editor.edit((s) =>
s.replace(
'<div data-testid="server-content">server:ok</div>',
'<div data-testid="server-content">server:broken<</div>',
Expand All @@ -189,7 +189,7 @@ test.describe(() => {

// fix syntax error
await page.waitForTimeout(200)
editor.edit((s) =>
await editor.edit((s) =>
s.replace(
'<div data-testid="server-content">server:broken<</div>',
'<div data-testid="server-content">server:fixed</div>',
Expand Down
4 changes: 2 additions & 2 deletions packages/plugin-rsc/e2e/use-cache-persistent.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,12 +169,12 @@ function defineDevTests(f: Fixture) {
// Reloading before that finishes can abort the refetch (an unhandled
// `TypeError: Load failed` in WebKit), or let the late update reach the
// reloaded page before it has hydrated.
async function editServerModule(page: Page, edit: () => void) {
async function editServerModule(page: Page, edit: () => Promise<void>) {
const refetch = page.waitForResponse(
(response) =>
response.request().method() === 'GET' && response.url().includes('_.rsc'),
)
edit()
await edit()
await (await refetch).finished()
}

Expand Down
Loading