Piye carane ngetes logika negara?

Question

Accepted Answer

Ngetes logika negara nambah kapercayaan manawa transisi lan nganyari negara iku bener. Strategi gumantung saka *kepiye* logika iku terstruktur — fungsi murni (reducer) paling gampang ditest, mula negara sing diarsitektur kanthi becik uga negara sing bisa ditest kanthi becik.

## Ngetes pure reducer kanthi langsung (kasus paling gampang lan paling berharga)

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

Amarga reducer iku fungsi murni, cukup nyamet kanthi input lan asert output — tanpa render, tanpa mocking, cepet lan deterministik. Iki *alasan* kenapa pure-reducer pattern dihargai banget.

## Ngetes selector

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

## Ngetes custom hook / logika store

```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` ngidini kowe ngetes logika negara hook/store kanthi terisolasi.

## Ngetes komponen kanthi perilaku, ora detil implementasi

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

Ngetes apa sing didelok/ditindakake panganggo (perilaku), ora detil implementasi — mula refactor ora bakal rusak tes.

## Ngetes negara asinkron (mock jaringan)

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

Gunakake MSW utawa mock kanggo ngetes transisi loading/success/error kanthi deterministik.

## Apa sing kudu diprioritasake

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

## Kenapa penting

Bug negara ana ing antarane sing paling berdampak, mula ngetes logika negara iku nilai tinggi.

Krusial, **negara sing terstruktur kanthi becik iku intrinsik bisa ditest**: pure reducer lan selector trivial kanggo unit test (tanpa mock, deterministik), sing iku argumen kuwat kanggo arsitektur iku.

Kangelan ngetes reducer/selector kanthi langsung, hook kanthi `renderHook`, komponen kanthi perilaku sing katon panganggo, lan alur asinkron kanthi jaringan sing dimokcok — nalika ngindhari tes detail implementasi sing brittle — menehi jangkauan anonotable saka logika paling bisa nyebabake bug subtle.