Jak testujete logiku stavu?

Question

Accepted Answer

Testování logiky stavu zvyšuje důvěru v to, že vaše přechody stavu a aktualizace jsou správné. Strategie závisí na *tom, jak* je logika strukturována — čisté funkce (reducers) se nejsnáze testují, takže dobře navržený stav je také dobře testovatelný stav.

## Testujte čisté reducers přímo (nejsnazší, nejvyšší hodnota)

```js
// reducers are pure: (state, action) => newState → trivial to test, no mocks
describe("todosReducer", () => {
  it("adds a todo", () => {
    const initial = [];
    const next = todosReducer(initial, { type: "todos/added", payload: { id: 1, text: "A" } });
    expect(next).toEqual([{ id: 1, text: "A" }]);
    expect(initial).toEqual([]); // ✅ verify the original wasn't mutated (immutability)
  });
});
```

Protože reducers jsou čisté funkce, jen je zavoláte se vstupem a ověříte výstup — bez renderování, bez mockování, rychle a deterministicky. To je *důvod*, proč je vzor čistého reduceru tak ceňován.

## Testujte selectors

```js
it("selects the cart total", () => {
  const state = { cart: { items: [{ price: 10 }, { price: 5 }] } };
  expect(selectCartTotal(state)).toBe(15);
});
```

## Testujte vlastní hooks / logiku úložiště

```jsx
import { renderHook, act } from "@testing-library/react";

it("increments", () => {
  const { result } = renderHook(() => useCounter());
  act(() => result.current.increment()); // act wraps state updates
  expect(result.current.count).toBe(1);
});
```

`renderHook` + `act` vám umožňují testovat logiku hook/store stavu izolovaně.

## Testujte komponenty chováním, ne internals

```jsx
import { render, screen, fireEvent } from "@testing-library/react";

it("shows the count after clicking", () => {
  render(<Counter />);
  fireEvent.click(screen.getByRole("button"));
  expect(screen.getByText("1")).toBeInTheDocument(); // assert the rendered RESULT
});
```

Testujte to, co uživatel vidí/dělá (chování), ne podrobnosti implementace — aby refaktoringy nezlomily testy.

## Testujte asynchronní stav (mockujte síť)

```js
// mock fetch/API (e.g. MSW), then assert loading → success/error transitions
it("handles fetch error → error state", async () => { ... });
```

Verejte MSW nebo mocky k determinickému testování přechodů loading/success/error.

## Co uprioritizovat

```text
Reducers/selectors/pure logic → unit test thoroughly (cheap, high value)
Component behavior           → integration test key user flows
Async flows                  → test transitions with mocked APIs
Don't test framework internals or trivial setters
```

## Proč je to důležité

Chyby stavu jsou mezi nejdopaditelnějšími, takže testování logiky stavu je vysoké hodnoty.

Nejdůležitější je, že **dobře strukturovaný stav je vrozeně testovatelný**: čisté reducers a selectors jsou triviální k jednotkovému testování (bez mocků, deterministické), což je silný argument pro tuto architekturu.

Vědět, jak testovat reducers/selectors přímo, hooks s `renderHook`, komponenty viditelným uživatelským chováním a asynchronní toky s mockovanými sítěmi — zatímco se vyhýbáte křehkým testům podrobností implementace — poskytuje spolehlivé pokrytí logiky, která s největší pravděpodobností způsobí jemné chyby.