Skip to content

Commit 5167266

Browse files
authored
test(rsc): refactor variant tests (#601)
1 parent d7fcdd8 commit 5167266

File tree

7 files changed

+160
-74
lines changed

7 files changed

+160
-74
lines changed

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

Lines changed: 0 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -46,65 +46,6 @@ test.describe('build-default', () => {
4646
defineTest(f)
4747
})
4848

49-
test.describe('dev-base', () => {
50-
const f = useFixture({
51-
root: 'examples/basic',
52-
mode: 'dev',
53-
cliOptions: {
54-
env: {
55-
TEST_BASE: 'true',
56-
},
57-
},
58-
})
59-
defineTest(f)
60-
})
61-
62-
test.describe('build-base', () => {
63-
const f = useFixture({
64-
root: 'examples/basic',
65-
mode: 'build',
66-
cliOptions: {
67-
env: {
68-
TEST_BASE: 'true',
69-
},
70-
},
71-
})
72-
defineTest(f)
73-
})
74-
75-
test.describe('dev-react-compiler', () => {
76-
const f = useFixture({
77-
root: 'examples/basic',
78-
mode: 'dev',
79-
cliOptions: {
80-
env: {
81-
TEST_REACT_COMPILER: 'true',
82-
},
83-
},
84-
})
85-
defineTest(f)
86-
87-
test('verify react compiler', async ({ page }) => {
88-
await page.goto(f.url())
89-
await waitForHydration(page)
90-
const res = await page.request.get(f.url('src/routes/client.tsx'))
91-
expect(await res.text()).toContain('react.memo_cache_sentinel')
92-
})
93-
})
94-
95-
test.describe('build-react-compiler', () => {
96-
const f = useFixture({
97-
root: 'examples/basic',
98-
mode: 'build',
99-
cliOptions: {
100-
env: {
101-
TEST_REACT_COMPILER: 'true',
102-
},
103-
},
104-
})
105-
defineTest(f)
106-
})
107-
10849
test.describe(() => {
10950
// disabled by default
11051
if (process.env.TEST_ISOLATED !== 'true') return

packages/plugin-rsc/e2e/fixture.ts

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -192,3 +192,37 @@ function editFileJson(filepath: string, edit: (s: string) => string) {
192192
),
193193
)
194194
}
195+
196+
// inspired by
197+
// https://github.com/remix-run/react-router/blob/433872f6ab098eaf946cc6c9cf80abf137420ad2/integration/helpers/vite.ts#L239
198+
// for syntax highlighting of /* js */, use this extension
199+
// https://github.com/mjbvz/vscode-comment-tagged-templates
200+
export async function setupInlineFixture(options: {
201+
src: string
202+
dest: string
203+
files?: Record<string, string>
204+
}) {
205+
fs.rmSync(options.dest, { recursive: true, force: true })
206+
fs.mkdirSync(options.dest, { recursive: true })
207+
208+
// copy src
209+
fs.cpSync(options.src, options.dest, {
210+
recursive: true,
211+
filter: (src) => !src.includes('node_modules') && !src.includes('dist'),
212+
})
213+
214+
// write additional files
215+
if (options.files) {
216+
for (const [filename, contents] of Object.entries(options.files)) {
217+
let filepath = path.join(options.dest, filename)
218+
fs.mkdirSync(path.dirname(filepath), { recursive: true })
219+
// strip indent
220+
const indent = contents.match(/^\s*/)?.[0] ?? ''
221+
const strippedContents = contents
222+
.split('\n')
223+
.map((line) => line.replace(new RegExp(`^${indent}`), ''))
224+
.join('\n')
225+
fs.writeFileSync(filepath, strippedContents)
226+
}
227+
}
228+
}

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

Lines changed: 102 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { expect, test } from '@playwright/test'
2-
import { type Fixture, useFixture } from './fixture'
2+
import { setupInlineFixture, type Fixture, useFixture } from './fixture'
33
import {
44
expectNoReload,
55
testNoJs,
@@ -42,6 +42,107 @@ test.describe('build-no-ssr', () => {
4242
})
4343
})
4444

45+
test.describe(() => {
46+
const root = 'examples/e2e/temp/react-compiler'
47+
48+
test.beforeAll(async () => {
49+
await setupInlineFixture({
50+
src: 'examples/starter',
51+
dest: root,
52+
files: {
53+
'vite.config.ts': /* js */ `
54+
import rsc from '@vitejs/plugin-rsc'
55+
import react from '@vitejs/plugin-react'
56+
import { defineConfig } from 'vite'
57+
58+
export default defineConfig({
59+
plugins: [
60+
react({
61+
babel: { plugins: ['babel-plugin-react-compiler'] },
62+
}).map((p) => ({
63+
...p,
64+
applyToEnvironment: (e) => e.name === 'client',
65+
})),
66+
rsc({
67+
entries: {
68+
client: './src/framework/entry.browser.tsx',
69+
ssr: './src/framework/entry.ssr.tsx',
70+
rsc: './src/framework/entry.rsc.tsx',
71+
}
72+
}),
73+
],
74+
})
75+
`,
76+
},
77+
})
78+
})
79+
80+
test.describe('dev-react-compiler', () => {
81+
const f = useFixture({ root, mode: 'dev' })
82+
defineTest(f)
83+
84+
test('verify react compiler', async ({ page }) => {
85+
await page.goto(f.url())
86+
await waitForHydration_(page)
87+
const res = await page.request.get(f.url('src/client.tsx'))
88+
expect(await res.text()).toContain('react.memo_cache_sentinel')
89+
})
90+
})
91+
92+
test.describe('build-react-compiler', () => {
93+
const f = useFixture({ root, mode: 'build' })
94+
defineTest(f)
95+
})
96+
})
97+
98+
test.describe(() => {
99+
const root = 'examples/e2e/temp/base'
100+
101+
test.beforeAll(async () => {
102+
await setupInlineFixture({
103+
src: 'examples/starter',
104+
dest: root,
105+
files: {
106+
'vite.config.ts': /* js */ `
107+
import rsc from '@vitejs/plugin-rsc'
108+
import react from '@vitejs/plugin-react'
109+
import { defineConfig } from 'vite'
110+
111+
export default defineConfig({
112+
base: '/custom-base/',
113+
plugins: [
114+
react(),
115+
rsc({
116+
entries: {
117+
client: './src/framework/entry.browser.tsx',
118+
ssr: './src/framework/entry.ssr.tsx',
119+
rsc: './src/framework/entry.rsc.tsx',
120+
}
121+
}),
122+
],
123+
})
124+
`,
125+
},
126+
})
127+
})
128+
129+
test.describe('dev-base', () => {
130+
const f = useFixture({ root, mode: 'dev' })
131+
defineTest({
132+
...f,
133+
url: (url) => new URL(url ?? './', f.url('./custom-base/')).href,
134+
})
135+
})
136+
137+
test.describe('build-base', () => {
138+
const f = useFixture({ root, mode: 'build' })
139+
defineTest({
140+
...f,
141+
url: (url) => new URL(url ?? './', f.url('./custom-base/')).href,
142+
})
143+
})
144+
})
145+
45146
function defineTest(f: Fixture, variant?: 'no-ssr') {
46147
const waitForHydration: typeof waitForHydration_ = (page) =>
47148
waitForHydration_(page, variant === 'no-ssr' ? '#root' : 'body')

packages/plugin-rsc/examples/basic/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@
2525
"@vitejs/test-dep-client-in-server2": "file:./test-dep/client-in-server2",
2626
"@vitejs/test-dep-server-in-client": "file:./test-dep/server-in-client",
2727
"@vitejs/test-dep-server-in-server": "file:./test-dep/server-in-server",
28-
"babel-plugin-react-compiler": "19.1.0-rc.2",
2928
"tailwindcss": "^4.1.11",
3029
"vite": "^7.0.4",
3130
"vite-plugin-inspect": "^11.3.0",

packages/plugin-rsc/examples/basic/vite.config.ts

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,10 @@ import inspect from 'vite-plugin-inspect'
77
import path from 'node:path'
88

99
export default defineConfig({
10-
base: process.env.TEST_BASE ? '/custom-base/' : undefined,
1110
clearScreen: false,
1211
plugins: [
1312
tailwindcss(),
14-
process.env.TEST_REACT_COMPILER
15-
? react({
16-
babel: { plugins: ['babel-plugin-react-compiler'] },
17-
}).map((p) => ({
18-
...p,
19-
applyToEnvironment: (e) => e.name === 'client',
20-
}))
21-
: react(),
13+
react(),
2214
vitePluginUseCache(),
2315
rsc({
2416
entries: {
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"name": "@vitejs/plugin-rsc-examples-e2e",
3+
"private": true,
4+
"type": "module",
5+
"devDependencies": {
6+
"@vitejs/plugin-rsc": "latest",
7+
"@vitejs/plugin-react": "latest",
8+
"babel-plugin-react-compiler": "19.1.0-rc.2"
9+
}
10+
}

pnpm-lock.yaml

Lines changed: 13 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)