كيف تختبر منطق الحالة؟

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

اختبر ما يراه/يفعله المستخدم (السلوك)، وليس تفاصيل التنفيذ — حتى لا تكسر إعادة الصياغة الاختبارات.

## اختبر الحالة غير المتزامنة (مقنع الشبكة)

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

استخدم MSW أو mocks لاختبار انتقالات التحميل/النجاح/الخطأ بشكل حتمي.

## ما يجب أن تعطيه الأولوية

```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`، والمكونات بالسلوك المرئي للمستخدم، والتدفقات غير المتزامنة مع الشبكات المقنعة — مع تجنب الاختبارات الهشة لتفاصيل التنفيذ — يعطيك تغطية موثوقة للمنطق الأكثر عرضة لإحداث أخطاء دقيقة.