State logic-ஐ எப்படி test செய்வீர்கள்?

Question

Accepted Answer

State logic-ஐ test செய்வது உங்கள் state transitions மற்றும் updates சரியானவை என்ற நம்பிக்கையை உருவாக்குகிறது. உத்தி logic *எப்படி* கட்டமைக்கப்பட்டுள்ளது என்பதைப் பொறுத்தது — pure functions (reducers) test செய்வது எளிது, எனவே நன்கு கட்டமைக்கப்பட்ட state நன்கு testable state-ஆகவும் இருக்கிறது.

## Pure reducers-ஐ நேரடியாக test செய்யுங்கள் (எளிதான, உயர்-மதிப்பு வழக்கு)

```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 pure functions என்பதால், நீங்கள் அவற்றை ஒரு input-உடன் call செய்து output-ஐ assert செய்கிறீர்கள் — rendering இல்லை, mocking இல்லை, வேகமான மற்றும் deterministic. pure-reducer pattern மிகவும் மதிக்கப்படுவதற்கான *காரணம்* இதுவே.

## Selectors-ஐ test செய்யுங்கள்

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

## Custom hooks / store logic-ஐ test செய்யுங்கள்

```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 state logic-ஐ தனிமையில் test செய்ய அனுமதிக்கின்றன.

## Components-ஐ internals-ஐ அல்ல, behavior மூலம் test செய்யுங்கள்

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

User பார்ப்பதை/செய்வதை (behavior) test செய்யுங்கள், implementation details-ஐ அல்ல — எனவே refactors tests-ஐ உடைக்காது.

## Async state-ஐ test செய்யுங்கள் (network-ஐ mock செய்யுங்கள்)

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

Loading/success/error transitions-ஐ deterministically test செய்ய 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
```

## இது ஏன் முக்கியம்

State bugs மிகவும் தாக்கம் கொண்டவற்றில் உள்ளன, எனவே state logic-ஐ test செய்வது உயர்-மதிப்பு கொண்டது.

மிக முக்கியமாக, **நன்கு கட்டமைக்கப்பட்ட state இயல்பாகவே testable**: pure reducers மற்றும் selectors unit test செய்வது மிக எளிது (mocks இல்லை, deterministic), இது அந்த architecture-க்கு ஒரு வலுவான வாதம்.

Reducers/selectors-ஐ நேரடியாகவும், hooks-ஐ `renderHook`-உடனும், components-ஐ user-க்குத் தெரியும் behavior மூலமாகவும், async flows-ஐ mocked networks-உடனும் test செய்ய அறிந்துகொள்வது — அதே நேரத்தில் உடையக்கூடிய implementation-detail tests-ஐ தவிர்த்து — நுட்பமான bugs-ஐ ஏற்படுத்தக்கூடிய logic-இன் நம்பகமான coverage-ஐ வழங்குகிறது.