Πώς δοκιμάζετε τη λογική κατάστασης;

Question

Accepted Answer

Η δοκιμή της λογικής κατάστασης χτίζει εμπιστοσύνη ότι οι μεταβάσεις κατάστασης και οι ενημερώσεις σας είναι σωστές. Η στρατηγική εξαρτάται από το *πώς* είναι δομημένη η λογική — οι καθαρές συναρτήσεις (reducers) είναι οι ευκολότερες για δοκιμή, επομένως η καλά αρχιτεκτονική κατάσταση είναι επίσης κατάσταση καλά δοκιμάσιμη.

## Δοκιμάστε τα καθαρά reducers απευθείας (η ευκολότερη, υψηλότερη περίπτωση αξίας)

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

Επειδή τα reducers είναι καθαρές συναρτήσεις, απλώς τις καλείτε με είσοδο και ισχυρίζεστε την έξοδο — χωρίς απόδοση, χωρίς mocking, γρήγορα και ντετερμινιστικά. Αυτό είναι *γιατί* το μοτίβο pure-reducer τιμάται τόσο πολύ.

## Δοκιμάστε τα selectors

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

## Δοκιμάστε τα custom hooks / λογική αποθήκης

```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 απομονωμένα.

## Δοκιμάστε τα συστατικά ανά συμπεριφορά, όχι εσωτερικά

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

Δοκιμάστε αυτό που βλέπει/κάνει ο χρήστης (συμπεριφορά), όχι λεπτομέρειες υλοποίησης — ώστε οι refactors να μην καταστρέψουν τις δοκιμές.

## Δοκιμάστε την ασύγχρονη κατάσταση (mock το δίκτυο)

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

Χρησιμοποιήστε MSW ή mocks για να δοκιμάσετε ντετερμινιστικά τις μεταβάσεις loading/success/error.

## Τι να δώσετε προτεραιότητα

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

## Γιατί έχει σημασία

Τα σφάλματα κατάστασης είναι από τα πιο επιδραστικά, επομένως η δοκιμή της λογικής κατάστασης είναι υψηλής αξίας.

Καθοριστικά, **η καλά δομημένη κατάσταση είναι εγγενώς δοκιμάσιμη**: τα καθαρά reducers και selectors είναι ασήμαντα για δοκιμή μονάδας (χωρίς mocks, ντετερμινιστικά), που είναι ένα ισχυρό επιχείρημα για αυτή την αρχιτεκτονική.

Το γνώρισμα του πώς να δοκιμάσετε τα reducers/selectors απευθείας, τα hooks με `renderHook`, τα συστατικά ανά συμπεριφορά ορατή από τον χρήστη και τις ασύγχρονες ροές με mocked δίκτυα — αποφεύγοντας ασταθείς δοκιμές λεπτομερειών υλοποίησης — δίνει αξιόπιστη κάλυψη της λογικής που είναι πιο πιθανό να προκαλέσει λεπτά σφάλματα.