diff --git a/packages/plugin-rsc/e2e/basic.test.ts b/packages/plugin-rsc/e2e/basic.test.ts index d6924c2cc..f8415def7 100644 --- a/packages/plugin-rsc/e2e/basic.test.ts +++ b/packages/plugin-rsc/e2e/basic.test.ts @@ -131,7 +131,7 @@ test.describe('dev-non-optimized-cjs', () => { test.beforeAll(async () => { // remove explicitly added optimizeDeps.include const editor = f.createEditor('vite.config.ts') - editor.edit((s) => + await editor.edit((s) => s.replace( `include: ['@vitejs/test-dep-transitive-cjs > @vitejs/test-dep-cjs'],`, ``, @@ -161,7 +161,7 @@ test.describe('dev-inconsistent-client-optimization', () => { test.beforeAll(async () => { // remove explicitly added optimizeDeps.exclude const editor = f.createEditor('vite.config.ts') - editor.edit((s) => + await editor.edit((s) => s.replace(`'@vitejs/test-dep-client-in-server2/client',`, ``), ) }) @@ -197,7 +197,7 @@ test.describe('build-stable-chunks', () => { // edit src/routes/client.tsx const editor = createEditor('src/routes/client.tsx') - editor.edit((s) => s.replace('client-counter', 'client-counter-v2')) + await editor.edit((s) => s.replace('client-counter', 'client-counter-v2')) // 2nd build await x('pnpm', ['build'], { @@ -516,7 +516,7 @@ function defineTest(f: Fixture) { // update server code const editor = f.createEditor('src/routes/action/action.tsx') - editor.edit((s) => + await editor.edit((s) => s.replace('const TEST_UPDATE = 1\n', 'const TEST_UPDATE = 10\n'), ) await expect(async () => { @@ -531,7 +531,7 @@ function defineTest(f: Fixture) { page.getByRole('button', { name: 'server-counter: 10' }), ).toBeVisible() - editor.reset() + await editor.reset() await expect(async () => { if (!options.js) await page.goto(f.url()) await expect( @@ -552,7 +552,9 @@ function defineTest(f: Fixture) { ).toBeVisible() const editor = f.createEditor('src/routes/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() @@ -561,7 +563,7 @@ function defineTest(f: Fixture) { 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() }) @@ -575,7 +577,7 @@ function defineTest(f: Fixture) { await expect(locator).toHaveText('test-hmr-client-dep: 1[ok]') const editor = f.createEditor('src/routes/hmr-client-dep/client-dep.tsx') - editor.edit((s) => s.replace('[ok]', '[ok-edit]')) + await editor.edit((s) => s.replace('[ok]', '[ok-edit]')) await expect(locator).toHaveText('test-hmr-client-dep: 1[ok-edit]') // check next rsc payload includes current client reference and preserves state @@ -593,7 +595,7 @@ function defineTest(f: Fixture) { }) expect(await res?.text()).toContain('[ok-edit]') - editor.reset() + await editor.reset() await expect(locator).toHaveText('test-hmr-client-dep: 1[ok]') }) @@ -607,7 +609,7 @@ function defineTest(f: Fixture) { await expect(locator).toHaveText('test-hmr-client-dep2: 1[ok]') const editor = f.createEditor('src/routes/hmr-client-dep2/client-dep.ts') - editor.edit((s) => s.replace('[ok]', '[ok-edit]')) + await editor.edit((s) => s.replace('[ok]', '[ok-edit]')) await expect(locator).toHaveText('test-hmr-client-dep2: 1[ok-edit]') // check next rsc payload includes an updated client reference and preserves state @@ -625,7 +627,7 @@ function defineTest(f: Fixture) { }) expect(await res?.text()).toContain('[ok-edit]') - editor.reset() + await editor.reset() await expect(locator).toHaveText('test-hmr-client-dep2: 1[ok]') }) @@ -634,11 +636,13 @@ function defineTest(f: Fixture) { await waitForHydration(page) await using _ = await expectNoReload(page) const editor = f.createEditor('src/routes/action/server.tsx') - editor.edit((s) => s.replace('server-counter', 'server-[edit]-counter')) + await editor.edit((s) => + s.replace('server-counter', 'server-[edit]-counter'), + ) await expect( page.getByRole('button', { name: 'server-[edit]-counter: 0' }), ).toBeVisible() - editor.reset() + await editor.reset() await expect( page.getByRole('button', { name: 'server-counter: 0' }), ).toBeVisible() @@ -657,11 +661,11 @@ function defineTest(f: Fixture) { // change parent module const editor = f.createEditor('src/routes/module-invalidation/server.tsx') - editor.edit((s) => s.replace('[dep:', '[dep-edit:')) + await editor.edit((s) => s.replace('[dep:', '[dep-edit:')) // preserve child module state await expect(locator).toContainText('[dep-edit: 1]') - editor.reset() + await editor.reset() await expect(locator).toContainText('[dep: 1]') }) @@ -680,7 +684,7 @@ function defineTest(f: Fixture) { // Test 1: Component HMR (shared1.tsx) const editor1 = f.createEditor('src/routes/hmr-shared/shared1.tsx') - editor1.edit((s) => s.replace('shared1', 'shared1-edit')) + await editor1.edit((s) => s.replace('shared1', 'shared1-edit')) // Verify both server and client components updated await expect(page.getByTestId('test-hmr-shared-server')).toContainText( @@ -690,7 +694,7 @@ function defineTest(f: Fixture) { '(shared1-edit, shared2)', ) - editor1.reset() + await editor1.reset() await expect(page.getByTestId('test-hmr-shared-server')).toContainText( '(shared1, shared2)', ) @@ -700,7 +704,7 @@ function defineTest(f: Fixture) { // Test 2: Non-component HMR (shared2.tsx) const editor2 = f.createEditor('src/routes/hmr-shared/shared2.tsx') - editor2.edit((s) => s.replace('shared2', 'shared2-edit')) + await editor2.edit((s) => s.replace('shared2', 'shared2-edit')) // Verify both server and client components updated await expect(page.getByTestId('test-hmr-shared-server')).toContainText( @@ -710,7 +714,7 @@ function defineTest(f: Fixture) { '(shared1, shared2-edit)', ) - editor2.reset() + await editor2.reset() await expect(page.getByTestId('test-hmr-shared-server')).toContainText( '(shared1, shared2)', ) @@ -731,7 +735,7 @@ function defineTest(f: Fixture) { // non-atomic update causes an error const editor = f.createEditor('src/routes/hmr-shared/atomic/shared.tsx') - editor.edit((s) => s.replace('test-shared', 'test-shared-edit')) + await editor.edit((s) => s.replace('test-shared', 'test-shared-edit')) await expect(page.getByTestId('test-hmr-shared-atomic')).toContainText( 'ErrorBoundary', ) @@ -740,7 +744,7 @@ function defineTest(f: Fixture) { await expect(page.getByText('ok (test-shared-edit)')).toBeVisible() // non-atomic update causes an error - editor.reset() + await editor.reset() await expect(page.getByTestId('test-hmr-shared-atomic')).toContainText( 'ErrorBoundary', ) @@ -758,13 +762,13 @@ function defineTest(f: Fixture) { '(useState: false)', ) const editor = f.createEditor('src/routes/hmr-switch/server.tsx') - editor.edit((s) => `"use client";\n` + s) + await editor.edit((s) => `"use client";\n` + s) await expect(page.getByTestId('test-hmr-switch-server')).toContainText( '(useState: true)', ) await page.waitForTimeout(100) - editor.reset() + await editor.reset() await expect(page.getByTestId('test-hmr-switch-server')).toContainText( '(useState: false)', ) @@ -779,13 +783,13 @@ function defineTest(f: Fixture) { '(useState: true)', ) const editor = f.createEditor('src/routes/hmr-switch/client.tsx') - editor.edit((s) => s.replace(`'use client'`, '')) + await editor.edit((s) => s.replace(`'use client'`, '')) await expect(page.getByTestId('test-hmr-switch-client')).toContainText( '(useState: false)', ) await page.waitForTimeout(100) - editor.reset() + await editor.reset() await expect(page.getByTestId('test-hmr-switch-client')).toContainText( '(useState: true)', ) @@ -856,12 +860,14 @@ function defineTest(f: Fixture) { await using _ = await expectNoReload(page) const editor = f.createEditor('src/routes/style-client/client.css') - editor.edit((s) => s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)')) + await editor.edit((s) => + s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)'), + ) await expect(page.locator('.test-style-client')).toHaveCSS( 'color', 'rgb(0, 165, 255)', ) - editor.edit((s) => + await editor.edit((s) => s.replaceAll( `color: rgb(0, 165, 255);`, `/* color: rgb(0, 165, 255); */`, @@ -873,7 +879,7 @@ function defineTest(f: Fixture) { ) // wait longer for multiple edits await page.waitForTimeout(100) - editor.reset() + await editor.reset() await expect(page.locator('.test-style-client')).toHaveCSS( 'color', 'rgb(255, 165, 0)', @@ -933,7 +939,7 @@ function defineTest(f: Fixture) { // remove css import const editor = f.createEditor('src/routes/style-client/client-dep.tsx') - editor.edit((s) => + await editor.edit((s) => s.replaceAll( `import './client-dep.css'`, `/* import './client-dep.css' */`, @@ -950,7 +956,7 @@ function defineTest(f: Fixture) { }).toPass() // add back css import - editor.reset() + await editor.reset() await page.waitForTimeout(100) await expect(async () => { if (!options.js) await page.reload() @@ -968,12 +974,14 @@ function defineTest(f: Fixture) { await using _ = await expectNoReload(page) const editor = f.createEditor('src/routes/style-server/server.css') - editor.edit((s) => s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)')) + await editor.edit((s) => + s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)'), + ) await expect(page.locator('.test-style-server')).toHaveCSS( 'color', 'rgb(0, 165, 255)', ) - editor.edit((s) => + await editor.edit((s) => s.replaceAll( `color: rgb(0, 165, 255);`, `/* color: rgb(0, 165, 255); */`, @@ -983,7 +991,7 @@ function defineTest(f: Fixture) { 'color', 'rgb(0, 0, 0)', ) - editor.reset() + await editor.reset() await expect(page.locator('.test-style-server')).toHaveCSS( 'color', 'rgb(255, 165, 0)', @@ -1011,7 +1019,7 @@ function defineTest(f: Fixture) { await using _ = await expectNoReload(page) // remove css import - editor.edit((s) => + await editor.edit((s) => s.replaceAll(`import './server.css'`, `/* import './server.css' */`), ) await expect(page.locator('.test-style-server')).toHaveCSS( @@ -1020,7 +1028,7 @@ function defineTest(f: Fixture) { ) // add new css - editor.edit((s) => + await editor.edit((s) => s.replaceAll(`/* import './server.css' */`, `import './server2.css'`), ) await expect(page.locator('.test-style-server')).toHaveCSS( @@ -1030,7 +1038,7 @@ function defineTest(f: Fixture) { } // TODO: React doesn't re-inert same css link. so manual reload is required. - editor.reset() + await editor.reset() await page.waitForTimeout(100) await expect(async () => { await page.reload() @@ -1058,7 +1066,7 @@ function defineTest(f: Fixture) { // remove css import const editor = f.createEditor('src/routes/style-server/server.tsx') - editor.edit((s) => + await editor.edit((s) => s.replaceAll(`import './server.css'`, `/* import './server.css' */`), ) await page.waitForTimeout(100) @@ -1072,7 +1080,7 @@ function defineTest(f: Fixture) { }).toPass() // add back css import - editor.reset() + await editor.reset() await page.waitForTimeout(100) await expect(async () => { if (!options.js) await page.reload() @@ -1089,12 +1097,14 @@ function defineTest(f: Fixture) { await waitForHydration(page) await using _ = await expectNoReload(page) const editor = f.createEditor('src/routes/style-client/client.module.css') - editor.edit((s) => s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)')) + await editor.edit((s) => + s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)'), + ) await expect(page.getByTestId('css-module-client')).toHaveCSS( 'color', 'rgb(0, 165, 255)', ) - editor.edit((s) => + await editor.edit((s) => s.replaceAll( 'color: rgb(0, 165, 255);', '/* color: rgb(0, 165, 255); */', @@ -1108,7 +1118,7 @@ function defineTest(f: Fixture) { // resetting too fast seems to miss hmr update for fast machine // (ubuntu / chromium on CI since playwright 1.60.0) await page.waitForTimeout(100) - editor.reset() + await editor.reset() await expect(page.getByTestId('css-module-client')).toHaveCSS( 'color', 'rgb(255, 165, 0)', @@ -1120,12 +1130,14 @@ function defineTest(f: Fixture) { await waitForHydration(page) await using _ = await expectNoReload(page) const editor = f.createEditor('src/routes/style-server/server.module.css') - editor.edit((s) => s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)')) + await editor.edit((s) => + s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)'), + ) await expect(page.getByTestId('css-module-server')).toHaveCSS( 'color', 'rgb(0, 165, 255)', ) - editor.edit((s) => + await editor.edit((s) => s.replaceAll( 'color: rgb(0, 165, 255);', '/* color: rgb(0, 165, 255); */', @@ -1136,7 +1148,7 @@ function defineTest(f: Fixture) { 'rgb(0, 0, 0)', ) await page.waitForTimeout(100) - editor.reset() + await editor.reset() await expect(page.getByTestId('css-module-server')).toHaveCSS( 'color', 'rgb(255, 165, 0)', @@ -1153,7 +1165,9 @@ function defineTest(f: Fixture) { await expect(client).toHaveCSS('color', 'rgb(255, 165, 0)') const editor = f.createEditor('src/routes/style-shared/shared.css') - editor.edit((s) => s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)')) + await editor.edit((s) => + s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)'), + ) await expect(server).toHaveCSS('color', 'rgb(0, 165, 255)') await expect(client).toHaveCSS('color', 'rgb(0, 165, 255)') @@ -1183,11 +1197,13 @@ function defineTest(f: Fixture) { await expect(clientCard).toHaveCSS('color', 'rgb(255, 165, 0)') const editor = f.createEditor('src/routes/style-shared/shared.module.css') - editor.edit((s) => s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)')) + await editor.edit((s) => + s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)'), + ) await expect(serverCard).toHaveCSS('color', 'rgb(0, 165, 255)') await expect(clientCard).toHaveCSS('color', 'rgb(0, 165, 255)') - editor.edit((s) => + await editor.edit((s) => s.replaceAll( 'color: rgb(0, 165, 255);', '/* color: rgb(0, 165, 255); */', @@ -1197,7 +1213,7 @@ function defineTest(f: Fixture) { await expect(clientCard).toHaveCSS('color', 'rgb(0, 0, 0)') await page.waitForTimeout(100) - editor.reset() + await editor.reset() await expect(serverCard).toHaveCSS('color', 'rgb(255, 165, 0)') await expect(clientCard).toHaveCSS('color', 'rgb(255, 165, 0)') }) @@ -1207,12 +1223,14 @@ function defineTest(f: Fixture) { await waitForHydration(page) await using _ = await expectNoReload(page) const editor = f.createEditor('src/routes/style-client/client-url.css') - editor.edit((s) => s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)')) + await editor.edit((s) => + s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)'), + ) await expect(page.locator('.test-style-url-client')).toHaveCSS( 'color', 'rgb(0, 165, 255)', ) - editor.reset() + await editor.reset() await expect(page.locator('.test-style-url-client')).toHaveCSS( 'color', 'rgb(255, 165, 0)', @@ -1224,12 +1242,14 @@ function defineTest(f: Fixture) { await waitForHydration(page) await using _ = await expectNoReload(page) const editor = f.createEditor('src/routes/style-server/server-url.css') - editor.edit((s) => s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)')) + await editor.edit((s) => + s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)'), + ) await expect(page.locator('.test-style-url-server')).toHaveCSS( 'color', 'rgb(0, 165, 255)', ) - editor.reset() + await editor.reset() await expect(page.locator('.test-style-url-server')).toHaveCSS( 'color', 'rgb(255, 165, 0)', @@ -1362,24 +1382,24 @@ function defineTest(f: Fixture) { await using _ = await expectNoReload(page) const clientFile = f.createEditor('src/routes/tailwind/client.tsx') - clientFile.edit((s) => s.replaceAll('text-[#00f]', 'text-[#88f]')) + await clientFile.edit((s) => s.replaceAll('text-[#00f]', 'text-[#88f]')) await expect(page.locator('.test-tw-client')).toHaveCSS( 'color', 'rgb(136, 136, 255)', ) - clientFile.reset() + await clientFile.reset() await expect(page.locator('.test-tw-client')).toHaveCSS( 'color', 'rgb(0, 0, 255)', ) const serverFile = f.createEditor('src/routes/tailwind/server.tsx') - serverFile.edit((s) => s.replaceAll('text-[#f00]', 'text-[#f88]')) + await serverFile.edit((s) => s.replaceAll('text-[#f00]', 'text-[#f88]')) await expect(page.locator('.test-tw-server')).toHaveCSS( 'color', 'rgb(255, 136, 136)', ) - serverFile.reset() + await serverFile.reset() await expect(page.locator('.test-tw-server')).toHaveCSS( 'color', 'rgb(255, 0, 0)', @@ -1395,9 +1415,9 @@ function defineTest(f: Fixture) { logs.push(msg.text()) } }) - f.createEditor('src/routes/tailwind/unused.tsx').resave() + await f.createEditor('src/routes/tailwind/unused.tsx').resave() await page.waitForTimeout(200) - f.createEditor('src/routes/tailwind/server.tsx').resave() + await f.createEditor('src/routes/tailwind/server.tsx').resave() await page.waitForTimeout(200) expect(logs).toEqual([ expect.stringMatching(/\[vite-rsc:update\].*\/tailwind\/server.tsx/), diff --git a/packages/plugin-rsc/e2e/client-first.test.ts b/packages/plugin-rsc/e2e/client-first.test.ts index 8fb87503f..e93b94b84 100644 --- a/packages/plugin-rsc/e2e/client-first.test.ts +++ b/packages/plugin-rsc/e2e/client-first.test.ts @@ -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') }) diff --git a/packages/plugin-rsc/e2e/custom-server-function.test.ts b/packages/plugin-rsc/e2e/custom-server-function.test.ts index f490f3f67..5aaec7e83 100644 --- a/packages/plugin-rsc/e2e/custom-server-function.test.ts +++ b/packages/plugin-rsc/e2e/custom-server-function.test.ts @@ -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( @@ -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( diff --git a/packages/plugin-rsc/e2e/fixture.ts b/packages/plugin-rsc/e2e/fixture.ts index e2c98c2e5..1d9ac6458 100644 --- a/packages/plugin-rsc/e2e/fixture.ts +++ b/packages/plugin-rsc/e2e/fixture.ts @@ -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() + +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 = {} test.afterAll(async () => { for (const [filepath, content] of Object.entries(originalFiles)) { - fs.writeFileSync(filepath, content) + await writeWatchedFile(filepath, content) } }) @@ -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 { 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 { + await writeWatchedFile(filepath, originalFiles[filepath]!) }, - resave(): void { - fs.writeFileSync(filepath, current) + async resave(): Promise { + await writeWatchedFile(filepath, current) }, } } diff --git a/packages/plugin-rsc/e2e/react-router.test.ts b/packages/plugin-rsc/e2e/react-router.test.ts index 49a9c1c0b..4c63a75e9 100644 --- a/packages/plugin-rsc/e2e/react-router.test.ts +++ b/packages/plugin-rsc/e2e/react-router.test.ts @@ -97,7 +97,9 @@ function defineTest(f: Fixture) { ).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' }), @@ -112,7 +114,7 @@ function defineTest(f: Fixture) { 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.'), ) diff --git a/packages/plugin-rsc/e2e/starter.ts b/packages/plugin-rsc/e2e/starter.ts index 4f256364d..d0e4924b6 100644 --- a/packages/plugin-rsc/e2e/starter.ts +++ b/packages/plugin-rsc/e2e/starter.ts @@ -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 } @@ -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() }) @@ -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('

Vite + RSC

', '

Vite x RSC

'), ) await expect(page.getByText('Vite x RSC')).toBeVisible() - editor.reset() + await editor.reset() await expect(page.getByText('Vite + RSC')).toBeVisible() }) }) @@ -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);`, @@ -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)') }) diff --git a/packages/plugin-rsc/e2e/syntax-error.test.ts b/packages/plugin-rsc/e2e/syntax-error.test.ts index e56f3a185..77c43fdeb 100644 --- a/packages/plugin-rsc/e2e/syntax-error.test.ts +++ b/packages/plugin-rsc/e2e/syntax-error.test.ts @@ -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( '
client:ok
', '
client:broken<
', @@ -78,7 +78,7 @@ test.describe(() => { // fix syntax error await page.waitForTimeout(200) - editor.edit((s) => + await editor.edit((s) => s.replace( '
client:broken<
', '
client:fixed
', @@ -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( '
server:ok
', '
server:broken<
', @@ -123,7 +123,7 @@ test.describe(() => { // fix syntax error await page.waitForTimeout(200) - editor.edit((s) => + await editor.edit((s) => s.replace( '
server:broken<
', '
server:fixed
', @@ -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( '
client:ok
', '
client:broken<
', @@ -156,7 +156,7 @@ test.describe(() => { // fix syntax error await page.waitForTimeout(200) - editor.edit((s) => + await editor.edit((s) => s.replace( '
client:broken<
', '
client:fixed
', @@ -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( '
server:ok
', '
server:broken<
', @@ -189,7 +189,7 @@ test.describe(() => { // fix syntax error await page.waitForTimeout(200) - editor.edit((s) => + await editor.edit((s) => s.replace( '
server:broken<
', '
server:fixed
', diff --git a/packages/plugin-rsc/e2e/use-cache-persistent.test.ts b/packages/plugin-rsc/e2e/use-cache-persistent.test.ts index 1a9b346f4..3e125c1a1 100644 --- a/packages/plugin-rsc/e2e/use-cache-persistent.test.ts +++ b/packages/plugin-rsc/e2e/use-cache-persistent.test.ts @@ -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) { const refetch = page.waitForResponse( (response) => response.request().method() === 'GET' && response.url().includes('_.rsc'), ) - edit() + await edit() await (await refetch).finished() }