您如何测试状态逻辑？

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 / 存储逻辑

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

测试用户看到/执行的内容（行为），而不是实现细节——这样重构不会破坏测试。

## 测试异步状态（mock 网络请求）

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

使用 MSW 或 mocks 来确定性地测试 loading/success/error 转换。

## 优先事项

```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
```

## 为什么这很重要

状态 bug 是影响最大的，因此测试状态逻辑价值很高。

关键是，**架构良好的状态本质上是可测试的**：纯 reducers 和 selectors 很容易进行单元测试（无需 mocks，确定性），这是支持该架构的有力论据。

知道何时直接测试 reducers/selectors、何时用 `renderHook` 测试 hooks、何时按用户可见行为测试组件、何时用 mocked 网络测试异步流——同时避免脆弱的实现细节测试——能够对最可能导致细微 bug 的逻辑进行可靠的覆盖。