તમે સ્ટેટ લોજિક કેવી રીતે પરીક્ષણ કરો છો?

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 શુદ્ધ ફંક્શન્સ છે, તમે તેમને ઇનપુટ સાથે કૉલ કરો અને આઉટપુટ કોણ કરો — કોઈ રેન્ડરિંગ નહીં, કોઈ મોકિંગ નહીં, ઝડપી અને નિર્ધારક. આ *કેમ* શુદ્ધ-reducer પેટર્ન આટલો મૂલ્યવાન છે તે છે.>

## સિલેક્ટર્સ ટેસ્ટ કરો

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

જે કંઈ વપરાશકર્તા જુએ છે/કરે છે તે ટેસ્ટ કરો (વર્તણૂક), અમલીકરણ વિગતો નહીં — જેથી રીફેક્ટર્સ ટેસ્ટ્સ તોડશે નહીં.

## Async સ્ટેટ ટેસ્ટ કરો (નેટવર્ક મોક કરો)

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

લોડિંગ/સફળતા/ભૂલ ટ્રાન્સિશન્સ નિર્ધારક રીતે ટેસ્ટ કરવા માટે MSW અથવા મોક્સ વાપરો.

## પ્રાધાન્ય આપવા માટે શું છે

```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 એકમ પરીક્ષણ કરવા માટે તુચ્છ છે (કોઈ મોક્સ નહીં, નિર્ધારક), જે આ આર્કિટેક્ચર માટે એક મજબૂત દલીલ છે.

reducers/selectors સીધો ટેસ્ટ કરવું, `renderHook` સાથે hooks, વપરાશકર્તા-દૃશ્યમાન વર્તણૂક દ્વારા કમ્પોનેન્ટ્સ, અને મોક્ડ નેટવર્ક્સ સાથે async પ્રવાહો જાણવું — જ્યારે નાજુક અમલીકરણ-વિગત ટેસ્ટ્સ ટાળવું — સૌથી વધુ સૂક્ષ્મ બગ્સ પેદા કરવા માટે સંભાવ્ય લોજિકનું વિશ્વાસપૂર્ણ કવરેજ આપે છે.