Làm sao để test logic state?

Question

Accepted Answer

Test logic state xây dựng sự tự tin rằng các chuyển đổi và cập nhật state của bạn là chính xác. Chiến lược phụ thuộc vào *cách* logic được cấu trúc — các hàm thuần (reducer) dễ test nhất, nên state được kiến trúc tốt cũng là state dễ test.

## Test reducer thuần trực tiếp (trường hợp dễ nhất, giá trị cao nhất)

```js
// reducer là thuần: (state, action) => newState → tầm thường để test, không mock
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([]); // ✅ kiểm tra bản gốc không bị mutate (immutability)
  });
});
```

Vì reducer là hàm thuần, bạn chỉ cần gọi chúng với một input và assert output — không render, không mock, nhanh và xác định. Đây là *lý do* pattern reducer thuần được coi trọng đến vậy.

## Test selector

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

## Test custom hook / logic store

```jsx
import { renderHook, act } from "@testing-library/react";

it("increments", () => {
  const { result } = renderHook(() => useCounter());
  act(() => result.current.increment()); // act bọc các cập nhật state
  expect(result.current.count).toBe(1);
});
```

`renderHook` + `act` cho phép bạn test logic state của hook/store một cách độc lập.

## Test component theo hành vi, không theo nội bộ

```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 KẾT QUẢ render
});
```

Test cái người dùng thấy/làm (hành vi), không phải chi tiết triển khai — để các lần refactor không phá vỡ test.

## Test state async (mock mạng)

```js
// mock fetch/API (vd. MSW), rồi assert các chuyển đổi loading → success/error
it("handles fetch error → error state", async () => { ... });
```

Dùng MSW hoặc mock để test các chuyển đổi loading/success/error một cách xác định.

## Nên ưu tiên cái gì

```text
Reducer/selector/logic thuần → unit test kỹ lưỡng (rẻ, giá trị cao)
Hành vi component             → integration test các luồng người dùng then chốt
Các luồng async               → test các chuyển đổi với API đã mock
Đừng test nội bộ framework hay các setter tầm thường
```

## Tại sao điều này quan trọng

Bug state nằm trong số những bug có tác động lớn nhất, nên test logic state có giá trị cao.

Quan trọng, **state được cấu trúc tốt vốn dĩ dễ test**: reducer thuần và selector tầm thường để unit test (không mock, xác định), đây là một lập luận mạnh mẽ cho kiến trúc đó.

Biết test reducer/selector trực tiếp, hook với `renderHook`, component theo hành vi người dùng thấy được, và các luồng async với mạng đã mock — trong khi tránh các test dễ vỡ dựa trên chi tiết triển khai — cho coverage đáng tin cậy của logic dễ gây bug tinh vi nhất.