Si e testoni logjikën e gjendjes (state)?

Question

Accepted Answer

Testimi i logjikës së gjendjes ndërton besimin se tranzicionet dhe përditësimet e gjendjes tuaj janë të sakta. Strategjia varet nga *si* është strukturuar logjika — funksionet e pastra (reducesat) janë më të lehta për t'u testuar, kështu që gjendja e mirë-arkitekturuar është gjithashtu gjendja e mirë-testueshmërisë.

## Testoni direkt reducesat e pastër (rasti më i lehtë, me vlerë më të lartë)

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

Pasi reducesat janë funksione të pastra, ju thjesht i thërresnit me një hyrje dhe pohonit daljen — pa përshkrim, pa simulim, i shpejtë dhe deterministik. Kjo është *pse* modeli i reducesat të pastër është kaq i vlerësuar.

## Testoni selektorët

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

## Testoni hook-et / logjikën e magazinës të personalizuara

```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` ju lejojnë të testoni logjikën e gjendjes hook/magazinë në izolim.

## Testoni komponentët sipas sjelljes, jo sipas brendësisë

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

Testoni atë që përdoruesi sheh/bën (sjellje), jo detajet e zbatimit — kështu që refaktoret nuk do të prishin testet.

## Testoni gjendjen asinkrone (simuloni rrjetin)

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

Përdorni MSW ose simulime për të testuar tranzicionet e ngarkimit/suksesit/gabimit në mënyrë deterministike.

## Çfarë duhet të përqendroheni

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

## Pse ka rëndësi

Bugjet e gjendjes janë ndër më të ndikueshmet, kështu që testimi i logjikës së gjendjes është me vlerë të lartë.

Në mënyrë vendimtare, **gjendja e strukturuar mirë është në mënyrë vetëm testueshmërie**: reducesat dhe selektorët e pastër janë triviale për t'u testuar (pa simulime, deterministik), i cili është një argument i fortë për atë arkitekturë.

Dija se duhet të testoni direkt reducesat/selektorët, hook-et me `renderHook`, komponentët sipas sjelljes të dukshme për përdoruesin, dhe rrjedhat asinkrone me rrjete të simuluara — ndërsa shmangni testet e brishtë të detajeve të zbatimit — jep mbulim të besueshëm të logjikës më të mundshme të shkaktojë bug-e delikate.