E2E Rendering Tests

Purpose

This subtopic focuses on end-to-end (E2E) testing of rendering behaviors in React applications using the SWR library, particularly under complex asynchronous conditions such as suspense and manual retry mechanisms. It addresses the need to verify that the UI correctly handles data fetching states, error boundaries, retries, and server-side data serialization within real browser environments. These tests ensure that SWR’s integration with React’s Suspense and error handling features works reliably across different routing strategies and mutation scenarios.

Functionality

The core functionality exercised in these E2E rendering tests includes:

• Suspense with Preloading: Validating that data preloading occurs correctly and suspense fallback UI transitions to the loaded state without unnecessary delays.

• Retry Mechanisms in Suspense: Testing user-triggered retries when data fetching initially fails within Suspense boundaries, ensuring error messages appear and retry buttons properly initiate re-fetching.

• Compatibility Across React Routers: Ensuring retry workflows behave consistently with both the new App Router and the traditional Pages Router in React 19.

• Retry Using Mutation Triggers: Confirming that manual mutation calls (mutate) can also drive retries to recover from fetch errors inside Suspense.

• Server Component Serialization: Verifying that server components correctly serialize SWR cache keys using unstable_serialize, supporting SSR and hydration flows.

These workflows simulate user interactions in a browser context, using Playwright to navigate pages, trigger retries, and assert visible UI states reflecting success or error.

Example Test Snippet

test('should be able to retry in suspense with react 19 (app router)', async ({ page }) => {
  await page.goto('./suspense-retry', { waitUntil: 'commit' })
  await expect(page.getByText('Something went wrong')).toBeVisible()
  await page.getByRole('button', { name: 'retry' }).click()
  await expect(page.getByText('data: SWR suspense retry works')).toBeVisible()
})

This test verifies that when the initial fetch fails, the error message is shown, and clicking the retry button triggers a successful re-fetch displaying the expected data.

Integration

E2E rendering tests serve as a critical validation layer that complements unit and integration tests within the main SWR project. They:

• Validate Real-World User Flows: By driving actual browser interactions, these tests confirm that the SWR hooks and components behave as expected when combined with React Suspense, error boundaries, and mutation APIs.

• Bridge Core and Example Codebases: They test example applications and scenarios from the project’s example suites, providing confidence that documented use cases function end-to-end.

• Support Multiple React Features: By verifying compatibility across routing paradigms and server components, these tests help maintain robustness as the library evolves alongside React’s concurrent features.

• Complement Error Handling & Retry Logic: They specifically exercise retry strategies implemented in the error handling submodule, ensuring seamless user experiences when recovering from transient errors.

• Ensure SSR and Hydration Reliability: Testing server serialization mechanisms verifies the smooth transition of cached data from server to client, underpinning SSR and streaming support.

Together, these tests form a vital feedback loop for developers, preventing regressions in critical asynchronous rendering paths and increasing overall library stability.

Diagram

flowchart TD
  A[User Navigates to Page] --> B{Initial Data Fetch}
  B -->|Success| C[Render Data UI]
  B -->|Fail| D[Show Error Boundary]
  D --> E[Display Retry Button]
  E -->|User Clicks Retry| F[Trigger SWR mutate]
  F --> B
  C --> G[User Interacts with UI]
  G --> H[Optional Additional Fetches or Mutations]

This flowchart illustrates the core process tested by the E2E rendering tests: starting from a page load triggering data fetches, handling failure with error UI and retry options, and eventually rendering successful data states after retries. It highlights the interplay between user actions, SWR’s mutate function, and React’s Suspense/error handling.

By verifying these critical render and retry workflows in a full browser environment, this testing subtopic ensures that SWR’s complex asynchronous data handling integrates smoothly with React’s rendering paradigms, leading to robust, user-friendly applications.