use-swr-offline.test.tsx

Overview

This file contains automated tests for verifying the behavior of the useSWR React hook in offline and online scenarios. The primary focus is on ensuring that useSWR correctly handles network connectivity changes—specifically, that it does not revalidate data when the client is offline, and immediately revalidates when the client comes back online.

useSWR is a popular React hook for data fetching that provides caching, revalidation, focus tracking, and network status awareness. These tests simulate browser events (online and offline) and verify how useSWR responds to these changes by checking the rendered output.

The file uses React Testing Library (@testing-library/react) and utilities from a local ./utils module to facilitate event simulation and component rendering.

Detailed Explanation

Test Suite: `useSWR - offline`

This test suite contains two test cases that simulate offline and online scenarios to verify the revalidation behavior of useSWR.

Helper Functions

`focusWindow()`

const focusWindow = () => focusOn(window)

Purpose: Simulates focusing the browser window.
Usage: Used to trigger revalidation behavior in useSWR since it usually revalidates data when the window regains focus.
Implementation detail: Delegates to a utility function focusOn imported from ./utils.

`dispatchWindowEvent(event: string)`

const dispatchWindowEvent = event =>
  act(async () => {
    window.dispatchEvent(new Event(event))
  })

Purpose: Dispatches a browser event ('online' or 'offline') on the window object.
Parameters:
- event: The event name as a string. Expected values are 'online' or 'offline'.
Usage: Used to simulate going offline or coming online within the test environment.
Implementation detail: Wrapped in React's act to ensure React's state updates and effects are properly flushed.

Test Cases

1. `should not revalidate when offline`

Purpose: Verify that when the browser goes offline, useSWR does not attempt to re-fetch/revalidate data even when the window regains focus.
Test Steps:
1. Initialize a mutable value starting at 0.
2. Create a unique key for useSWR to use.
3. Define a Page component that calls useSWR with:
  - The key.
  - A fetcher function that increments and returns value.
  - dedupingInterval: 0 to disable deduplication and force immediate revalidation on each trigger.
4. Render the Page component.
5. Assert initial rendering (hydration) includes "data:".
6. Confirm the initial data is 0.
7. Simulate going offline by dispatching the 'offline' event.
8. Simulate window focus.
9. Assert that the data has NOT changed (still 0), meaning no revalidation occurred.
Expected Result: Data remains the same after going offline and refocusing.

2. `should revalidate immediately when becoming online`

Purpose: Verify that when the browser comes online, useSWR immediately revalidates data.
Test Steps:
1. Initialize value at 0.
2. Create a unique key.
3. Define the Page component similarly to the first test.
4. Render Page and assert initial data is 0.
5. Dispatch the 'online' event.
6. Assert that the data has updated to 1, indicating revalidation occurred.
Expected Result: Data increments when the client comes online, confirming immediate revalidation.

Implementation Details and Algorithms

The tests rely on React Testing Library's async utilities (screen.findByText) to wait for asynchronous updates triggered by useSWR.
Network status changes are simulated via native window events (online and offline), which useSWR internally listens to in order to trigger revalidation behavior.
The dedupingInterval: 0 option disables deduplication delays so that each revalidation attempt occurs immediately when triggered.
The use of act() ensures React batches state updates properly during event dispatch.
waitForNextTick() is used to yield to the next tick of the event loop to allow internal state changes or timers to resolve before continuing the test.

Interaction with Other Parts of the System

./utils module: Provides auxiliary functions for:
- Rendering components with required context or providers (renderWithConfig).
- Creating unique keys for SWR cache (createKey).
- Simulating focus events (focusOn).
- Delaying execution until the next event loop tick (nextTick).
useSWR hook: The core hook under test, imported from the SWR package, which manages data fetching, caching, and revalidation.
React Testing Library: Provides tools to render components and query DOM elements for assertions.
Browser window object: Used to simulate network connectivity changes by dispatching events that useSWR listens to.

Usage Example of the `Page` Component in the Tests

function Page() {
  const { data } = useSWR(key, () => value++, {
    dedupingInterval: 0
  });
  return <div>data: {data}</div>;
}

key: Unique cache key for SWR.
() => value++: Fetcher function incrementing and returning value.
dedupingInterval: 0: Disable deduplication to allow immediate revalidation.
Renders the current data from SWR into a <div>.

Mermaid Diagram: Test Flowchart

This flowchart shows the main functions and their interactions within the test file, emphasizing the flow of event dispatch and UI assertions.

flowchart TD
    A[Start Test Suite: useSWR - offline]

    subgraph Setup
        B[Initialize value = 0]
        C[Create unique SWR key]
        D[Define Page component using useSWR]
    end

    subgraph Test1["Test: should not revalidate when offline"]
        E[Render Page component]
        F[Assert initial render has "data:"]
        G[Assert initial data: 0]
        H[Dispatch 'offline' event]
        I[Simulate window focus]
        J[Assert data still 0 (no revalidation)]
    end

    subgraph Test2["Test: should revalidate immediately when online"]
        K[Render Page component]
        L[Assert initial data: 0]
        M[Dispatch 'online' event]
        N[Assert data updated to 1 (revalidation)]
    end

    A --> B --> C --> D
    D --> E --> F --> G --> H --> I --> J
    D --> K --> L --> M --> N

Summary

This test file is crucial for ensuring the useSWR hook behaves correctly in offline-first or flaky network environments by verifying that:

Data is not revalidated when the network is offline, even on window refocus.
Data is immediately revalidated as soon as the network status changes to online.

This ensures efficient network usage and a better user experience in real-world scenarios with intermittent connectivity.

End of Documentation for `use-swr-offline.test.tsx`

use-swr-offline.test.tsx

Overview

Detailed Explanation

Test Suite: useSWR - offline

Helper Functions

focusWindow()

dispatchWindowEvent(event: string)