Unawezaje kupima (test) state logic?

Question

Accepted Answer

Kupima state logic hujenga uhakika kwamba mageuzi na usasishaji wa state wako ni sahihi. Mkakati hutegemea *jinsi* logic ilivyoundwa — pure functions (reducers) ni rahisi zaidi kupima, hivyo state iliyoundwa vyema pia ni state inayoweza kupimwa vyema.

## Pima pure reducers moja kwa moja (kesi rahisi zaidi, yenye thamani kubwa zaidi)

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

Kwa sababu reducers ni pure functions, unaziita tu na input kisha kuthibitisha output — hakuna rendering, hakuna mocking, haraka na ya kubashirika. Hii ndiyo *sababu* mfumo wa pure-reducer unathaminiwa sana.

## Pima selectors

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

## Pima custom hooks / store logic

```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` hukuruhusu kupima hook/store state logic kwa kujitenga.

## Pima vipengele kwa tabia (behavior), si ndani yake

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

Pima kile mtumiaji anachoona/anachofanya (behavior), si maelezo ya utekelezaji — ili refactors zisiharibu vipimo.

## Pima async state (mock the network)

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

Tumia MSW au mocks kupima mageuzi ya loading/success/error kwa njia ya kubashirika.

## Nini cha kupa kipaumbele

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

## Kwa nini ni muhimu

Hitilafu za state ni miongoni mwa zenye athari kubwa zaidi, hivyo kupima state logic kuna thamani kubwa.

Muhimu zaidi, **state iliyoundwa vyema kwa asili inaweza kupimwa**: pure reducers na selectors ni rahisi sana kupima kwa unit test (hakuna mocks, ya kubashirika), jambo ambalo ni hoja yenye nguvu kwa usanifu huo.

Kujua kupima reducers/selectors moja kwa moja, hooks kwa `renderHook`, vipengele kwa behavior inayoonekana kwa mtumiaji, na async flows kwa networks zilizo-mock — huku ukiepuka vipimo dhaifu vya maelezo ya utekelezaji — kunakupa ufunikaji wa kuaminika wa logic inayoweza kusababisha hitilafu fiche zaidi.