test: add e2e fixtures for new experimental TanStack Start RSC#651
Conversation
📝 WalkthroughSummary by CodeRabbitRelease Notes
WalkthroughThis PR adds React Server Components (RSC) support to a TanStack Start test fixture. It introduces two new routes ( Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
812f7ad to
4210df1
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/vite-plugin-tanstack-start/test/e2e/build.test.ts`:
- Around line 100-102: The test reads the counter value immediately after
page.click which can race with async state updates; replace the immediate
page.textContent call with a wait-based assertion (use page.waitForSelector or
page.waitForFunction, or create a locator via
page.locator('[data-testid="counter-value"]') and use
expect(locator).toHaveText('1')) so the test waits for the DOM to reflect the
increment before asserting; update the lines using page.click, page.textContent
and the '[data-testid="counter-value"]' selector accordingly.
In
`@packages/vite-plugin-tanstack-start/test/fixtures/start-basic-rc/src/utils/rsc.tsx`:
- Around line 36-40: The RSC fixture currently fetches live data via fetch(...)
and throws on non-OK results, creating a brittle dependency; modify the code
around the fetch call so that you attempt the network request but gracefully
fallback to a deterministic local dataset when the fetch fails or returns a
non-OK response. Specifically, wrap the fetch in try/catch (or check res.ok) and
on any error or non-OK response set users to a hard-coded array of user objects
(same shape as Array<{id:number;name:string;email:string}>) instead of throwing;
update the logic in the module containing the const res / const users to use
this fallback so tests remain deterministic.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 242a8f05-93b3-4c8f-9c44-f32ad470bdba
📒 Files selected for processing (9)
packages/vite-plugin-tanstack-start/test/e2e/build.test.tspackages/vite-plugin-tanstack-start/test/fixtures/start-basic-rc/package.jsonpackages/vite-plugin-tanstack-start/test/fixtures/start-basic-rc/src/components/Counter.tsxpackages/vite-plugin-tanstack-start/test/fixtures/start-basic-rc/src/routeTree.gen.tspackages/vite-plugin-tanstack-start/test/fixtures/start-basic-rc/src/routes/__root.tsxpackages/vite-plugin-tanstack-start/test/fixtures/start-basic-rc/src/routes/rsc-basic.tsxpackages/vite-plugin-tanstack-start/test/fixtures/start-basic-rc/src/routes/rsc-composite.tsxpackages/vite-plugin-tanstack-start/test/fixtures/start-basic-rc/src/utils/rsc.tsxpackages/vite-plugin-tanstack-start/test/fixtures/start-basic-rc/vite.config.ts
| await page.click('[data-testid="counter-button"]') | ||
| const updatedValue = await page.textContent('[data-testid="counter-value"]') | ||
| expect(updatedValue).toBe('1') |
There was a problem hiding this comment.
Stabilize post-click counter assertion to avoid async flake.
At Line 100-Line 102, the value is read immediately after click. This can intermittently fail before state commit in slower environments.
Suggested fix
- await page.click('[data-testid="counter-button"]')
- const updatedValue = await page.textContent('[data-testid="counter-value"]')
- expect(updatedValue).toBe('1')
+ await page.click('[data-testid="counter-button"]')
+ await page.waitForFunction(() => {
+ const el = document.querySelector('[data-testid="counter-value"]')
+ return el?.textContent === '1'
+ })📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| await page.click('[data-testid="counter-button"]') | |
| const updatedValue = await page.textContent('[data-testid="counter-value"]') | |
| expect(updatedValue).toBe('1') | |
| await page.click('[data-testid="counter-button"]') | |
| await page.waitForFunction(() => { | |
| const el = document.querySelector('[data-testid="counter-value"]') | |
| return el?.textContent === '1' | |
| }) |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/vite-plugin-tanstack-start/test/e2e/build.test.ts` around lines 100
- 102, The test reads the counter value immediately after page.click which can
race with async state updates; replace the immediate page.textContent call with
a wait-based assertion (use page.waitForSelector or page.waitForFunction, or
create a locator via page.locator('[data-testid="counter-value"]') and use
expect(locator).toHaveText('1')) so the test waits for the DOM to reflect the
increment before asserting; update the lines using page.click, page.textContent
and the '[data-testid="counter-value"]' selector accordingly.
| const res = await fetch('https://jsonplaceholder.typicode.com/users') | ||
| if (!res.ok) { | ||
| throw new Error('Failed to fetch users for RSC') | ||
| } | ||
| const users = (await res.json()) as Array<{ id: number; name: string; email: string }> |
There was a problem hiding this comment.
Avoid hard dependency on live third-party API in e2e fixture path.
At Line 36-Line 40, the fixture relies on a public API at request time. This makes RSC tests non-deterministic and vulnerable to external outages/rate limits.
Suggested deterministic fallback pattern
export const fetchRscUserList = createServerFn().handler(async () => {
- const res = await fetch('https://jsonplaceholder.typicode.com/users')
- if (!res.ok) {
- throw new Error('Failed to fetch users for RSC')
- }
- const users = (await res.json()) as Array<{ id: number; name: string; email: string }>
+ const fallbackUsers: Array<{ id: number; name: string; email: string }> = [
+ { id: 1, name: 'Leanne Graham', email: 'leanne@example.com' },
+ { id: 2, name: 'Ervin Howell', email: 'ervin@example.com' },
+ { id: 3, name: 'Clementine Bauch', email: 'clementine@example.com' },
+ { id: 4, name: 'Patricia Lebsack', email: 'patricia@example.com' },
+ { id: 5, name: 'Chelsey Dietrich', email: 'chelsey@example.com' },
+ ]
+
+ let users = fallbackUsers
+ try {
+ const res = await fetch('https://jsonplaceholder.typicode.com/users')
+ if (res.ok) {
+ users = (await res.json()) as Array<{ id: number; name: string; email: string }>
+ }
+ } catch {
+ // keep deterministic fallback for fixture stability
+ }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In
`@packages/vite-plugin-tanstack-start/test/fixtures/start-basic-rc/src/utils/rsc.tsx`
around lines 36 - 40, The RSC fixture currently fetches live data via fetch(...)
and throws on non-OK results, creating a brittle dependency; modify the code
around the fetch call so that you attempt the network request but gracefully
fallback to a deterministic local dataset when the fetch fails or returns a
non-OK response. Specifically, wrap the fetch in try/catch (or check res.ok) and
on any error or non-OK response set users to a hard-coded array of user objects
(same shape as Array<{id:number;name:string;email:string}>) instead of throwing;
update the logic in the module containing the const res / const users to use
this fallback so tests remain deterministic.
See: