Mutation E2E Tests

Purpose

Mutation E2E Tests focus on validating the correctness and user experience of remote data mutation workflows within the broader SWR mutation feature. While the parent topic covers mutation hooks and UI feedback conceptually, these tests verify that the mutation lifecycle—from initiation through completion or failure—is reliably handled in a real browser environment. This ensures that optimistic updates, loading states, rollback on errors, and cache synchronization behave as expected under realistic usage.

Functionality

These end-to-end tests simulate user interactions that trigger remote mutations (such as POST or PUT requests) and observe the resulting UI states:

• Triggering Mutation: The test script navigates to the mutation example page and clicks the mutation trigger button.

• Loading State Verification: Immediately after mutation initiation, the UI reflects a loading state (e.g., isMutating: true), indicating the mutation is in progress.

• Data Update Verification: After the mutation completes, the UI updates to show the new data returned by the server (e.g., data: 10086).

• Loading State Reset: The loading indicator resets to false, confirming the mutation lifecycle has ended.

The test uses Playwright to automate browser actions and assertions, simulating real user behavior and verifying actual rendered output rather than internal hook states.

A critical snippet from the test illustrates this interaction:

await page.goto('./mutate-server-action')
await page.getByRole('button', { name: 'mutate' }).click()
await expect(page.getByText('isMutating: true')).toBeVisible()
await expect(page.getByText('data: ')).toBeVisible()
await page.waitForTimeout(500)
await expect(page.getByText('isMutating: false')).toBeVisible()
await expect(page.getByText('data: 10086')).toBeVisible()

This sequence validates that UI feedback aligns with mutation state transitions, ensuring a smooth user experience during asynchronous operations.

Integration

Mutation E2E Tests serve as a vital quality gate within the overall mutation subtopic by:

• Complementing Hook Logic: While useSWRMutation handles mutation logic internally, these tests confirm that the UI components using this hook behave correctly in practice.

• Ensuring Consistency Across Layers: They verify integration between React components, SWR hooks, cache updates, and server API responses.

• Preventing Regression: Automated tests detect unintended changes that could break mutation workflows or degrade user feedback.

• Supporting Developer Confidence: Clear, reliable E2E coverage empowers developers to extend mutation features or refactor code with assurance.

By bridging the gap between core mutation logic and user-facing behavior, these tests ensure mutation workflows remain robust and performant as part of the larger SWR ecosystem.

Mutation E2E Test Workflow Diagram

flowchart TD
    A[User Loads Mutation Page] --> B[User Clicks "mutate" Button]
    B --> C[Mutation Hook Starts Mutation]
    C --> D[UI Shows isMutating: true]
    D --> E[Server Processes Mutation Request]
    E --> F[Server Responds with New Data]
    F --> G[Cache & UI Update with New Data]
    G --> H[UI Shows isMutating: false]

This flowchart visualizes the end-to-end mutation lifecycle as tested by the E2E suite, from user interaction through server response to UI state synchronization.