Bagaimana Anda menguji logika state?

Question

Accepted Answer

Menguji logika state membangun kepercayaan bahwa transisi state dan pembaruan Anda benar. Strategi tergantung pada *bagaimana* logika terstruktur — fungsi murni (reducers) adalah yang paling mudah diuji, jadi state yang diarsitektur dengan baik juga merupakan state yang dapat diuji dengan baik.

## Uji reducers murni secara langsung (kasus termudah, nilai tertinggi)

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

Karena reducers adalah fungsi murni, Anda hanya memanggilnya dengan input dan mengasersi output — tidak ada rendering, tidak ada mocking, cepat dan deterministik. Ini adalah *mengapa* pola pure-reducer sangat dihargai.

## Uji selectors

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

## Uji hooks kustom / 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` memungkinkan Anda menguji logika state hook/store secara terisolasi.

## Uji komponen berdasarkan perilaku, bukan internal

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

Uji apa yang dilihat/lakukan pengguna (perilaku), bukan detail implementasi — agar refactor tidak merusak tes.

## Uji state asinkron (mock jaringan)

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

Gunakan MSW atau mock untuk menguji transisi loading/success/error secara deterministik.

## Apa yang harus diprioritaskan

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

## Mengapa ini penting

Bug state termasuk yang paling berdampak, jadi menguji logika state memiliki nilai tinggi.

Yang sangat penting, **state yang terstruktur dengan baik secara inheren dapat diuji**: reducers murni dan selectors trivial untuk diuji unit (tidak ada mock, deterministik), yang merupakan argumen kuat untuk arsitektur tersebut.

Mengetahui cara menguji reducers/selectors secara langsung, hooks dengan `renderHook`, komponen berdasarkan perilaku yang terlihat pengguna, dan alur asinkron dengan jaringan yang di-mock — sambil menghindari tes yang rapuh berbasis detail implementasi — memberikan cakupan yang andal atas logika yang paling mungkin menyebabkan bug yang halus.