আপনি কীভাবে স্টেট লজিক পরীক্ষা করেন?

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

## কাস্টম hooks / 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` আপনাকে 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 সরাসরি পরীক্ষা করতে জানা, `renderHook` সহ hooks, ব্যবহারকারী-দৃশ্যমান আচরণ দ্বারা কম্পোনেন্ট, এবং mocked নেটওয়ার্কের সাথে অ্যাসিঙ্ক ফ্লো — যখন ভঙ্গুর বাস্তবায়ন-বিবরণ পরীক্ষাগুলি এড়ান — সবচেয়ে সূক্ষ্ম বাগ ঘটাতে পারে এমন লজিকের নির্ভরযোগ্য কভারেজ দেয়।