Test every state of every data view

How to do it

Fake the API with a request-level tool, such as Mock Service Worker, so the component's own fetching code runs. Give each state its own test, such as loading, empty, error and success. Find elements as people do, as stable selectors describes. Run an accessibility scan in each test, as accessibility in CI describes. For server-rendered partials, render each state through the test client.

Example

import { http, HttpResponse } from 'msw';
import { setupServer } from 'msw/node';
import { render, screen } from '@testing-library/react';

const server = setupServer();
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

test('shows the first-use empty state', async () => {
  server.use(http.get('/api/orders', () => HttpResponse.json({ items: [], nextCursor: null })));
  render(<OrdersScreen />, { wrapper: AppProviders });
  expect(await screen.findByRole('heading', { name: 'No orders yet' })).toBeVisible();
});

test('shows a retry button when loading fails', async () => {
  server.use(http.get('/api/orders', () => HttpResponse.json({ status: 503, reference: 'ERR-7F3C' }, { status: 503 })));
  render(<OrdersScreen />, { wrapper: AppProviders });
  expect(await screen.findByRole('button', { name: 'Try again' })).toBeVisible();
});

def test_orders_panel_shows_empty_state(client, signed_in_user, monkeypatch):
    monkeypatch.setattr(order_service, "recent", lambda account_id: [])
    response = client.get("/panels/orders")
    assert response.status_code == 200
    assert "No orders yet" in response.text

def test_orders_panel_shows_error_with_reference(client, signed_in_user, monkeypatch):
    def unavailable(account_id):
        raise ServiceUnavailable(reference="ERR-7F3C")
    monkeypatch.setattr(order_service, "recent", unavailable)
    response = client.get("/panels/orders")
    assert response.status_code == 503
    assert "ERR-7F3C" in response.text

How to check

The suite has one passing test per state for every data view. Deleting the empty-state branch of any view makes a test fail.