Durum mantığını nasıl test edersiniz?

Question

Accepted Answer

Durum mantığını test etmek, durum geçişlerinizin ve güncellemelerinizin doğru olduğuna dair güven oluşturur. Strateji, mantığın *nasıl* yapılandırıldığına bağlıdır — saf fonksiyonlar (reducer'lar) test edilmesi en kolay olduğundan, iyi mimarlanmış durum aynı zamanda iyi test edilebilir durumdur.

## Saf reducer'ları doğrudan test edin (en kolay, en yüksek değerli durum)

```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)
  });
});
```

Reducer'lar saf fonksiyonlar olduğundan, onları bir girdiye çağırıp çıktıyı assert edersiniz — render etme yok, mock yok, hızlı ve belirleyici. Bu, *neden* saf reducer deseni bu kadar değerli olduğunun nedenidir.

## Selector'ları test edin

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

## Özel hook'lar / store mantığını test edin

```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`, hook/store durum mantığını izole şekilde test etmenize izin verir.

## Bileşenleri davranışa göre test edin, iç işleyişe göre değil

```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
});
```

Kullanıcının gördüğü/yaptığı şeyi (davranış) test edin, uygulama detaylarını değil — böylece refactor'lar testleri bozmaz.

## Asenkron durumu test edin (ağı mock edin)

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

Yükleme/başarı/hata geçişlerini belirleyici şekilde test etmek için MSW veya mock'ları kullanın.

## Neyi önceliklendirin

```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
```

## Neden önemli

Durum hataları en etkili hatalardan biridir, bu nedenle durum mantığını test etmek yüksek değerlidir.

Önemlisi, **iyi yapılandırılmış durum doğası gereği test edilebilirdir**: saf reducer'lar ve selector'lar birim test etmesi önemsizdir (mock yok, belirleyici), bu da bu mimari için güçlü bir argümandır.

Reducer'ları/selector'ları doğrudan test etmeyi, hook'ları `renderHook` ile test etmeyi, bileşenleri kullanıcı tarafından görülebilir davranışa göre test etmeyi ve asenkron akışları mock edilmiş ağlarla test etmeyi bilmek — brittle uygulama detayı testlerinden kaçınırken — en çok ince hataların ortaya çıkmasına neden olan mantığın güvenilir kapsamını verir.