तपाई स्टेट लजिक कसरी परीक्षण गर्नुहुन्छ?

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

Kinaकि reducers शुद्ध फंक्शनहरू छन्, तपाई तिनलाई इनपुटको साथ कल गर्नुहोस् र आउटपुट दाबी गर्नुहोस् — कुनै रेन्डरिङ छैन, कुनै मकिङ छैन, छिटो र नियतात्मक। यो शुद्ध-reducer प्याटर्न किन यति मूल्यवान छ भन्ने कारण हो।

## Selectors परीक्षण गर्नुहोस्

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

## कस्टम 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
});
```

योजक जे देख्छ/गर्छ (आचरण) परीक्षण गर्नुहोस्, कार्यान्वयन विवरण होइन — त्यसैले रिफ्याक्टरले परीक्षणहरु भाँच्दैन।

## Async स्टेट परीक्षण गर्नुहोस् (नेटवर्क मक गर्नुहोस्)

```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 नेटवर्कको साथ async फ्लोहरु गर्न — कार्यान्वयन-विवरण परीक्षणहरु से बच्दै — विश्वसनीय कवरेज दिन्छ। सबैभन्दा सूक्ष्म बगहरु कारण बन्ने लजिकको।