测试状态逻辑能够让您有信心确保状态转换和更新是正确的。策略取决于如何组织逻辑——纯函数(reducers)最容易测试,因此架构良好的状态也是易于测试的状态。
直接测试纯 reducers(最简单,最有价值的情况)
js
(, {
(, {
initial = [];
next = (initial, { : , : { : , : } });
(next).([{ : , : }]);
(initial).([]);
});
});
测试状态逻辑能够让您有信心确保状态转换和更新是正确的。策略取决于如何组织逻辑——纯函数(reducers)最容易测试,因此架构良好的状态也是易于测试的状态。
(, {
(, {
initial = [];
next = (initial, { : , : { : , : } });
(next).([{ : , : }]);
(initial).([]);
});
});
因为 reducers 是纯函数,您只需用输入调用它们并断言输出——无需渲染,无需 mocking,快速且确定性。这正是 pure-reducer 模式备受推崇的原因。
it("selects the cart total", () => {
const state = { cart: { items: [{ price: 10 }, { price: 5 }] } };
expect(selectCartTotal(state)).toBe(15);
});
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 状态逻辑。
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 fetch/API (e.g. MSW), then assert loading → success/error transitions
it("handles fetch error → error state", async () => { ... });
使用 MSW 或 mocks 来确定性地测试 loading/success/error 转换。
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 的逻辑进行可靠的覆盖。
一个包含详细解答的 IT 面试题库——从初级到高级。
捐赠