企业官网建设流程全解析

• 测试
• 前端

导读

在基于 Enzyme 编写 React 组件测试时，断言组件内部state的当前值是最常见的需求之一。ReactWrapper.state([key])正是为此设计的方法：它返回挂载（mount）后组件根节点的完整 state 哈希对象，也支持传入属性名仅取单个字段。阅读本文后，你将掌握该方法在 enzyme 中的完整用法、边界限制（类组件限制、根节点限制、多节点限制）以及其底层实现原理，并了解如何与.setState()、.props()等兄弟方法配合，写出更准确的断言。

方法签名与返回值

.state([key]) => Any

state()返回 wrapper 根节点的state 哈希对象（一个普通 JavaScript 对象）。可选地传入一个属性名（key）时，它只返回this.state[key]对应的那个值，而非整个 state 对象。

在 packages/enzyme/src/ReactWrapper.js 中，该方法的核心实现如下：

state(name) { const thisNode = this[ROOT] === this ? this[RENDERER].getNode() : this.getNodeInternal(); if (this.instance() === null || thisNode.nodeType !== 'class') { throw new Error('ReactWrapper::state() can only be called on class components'); } const _state = this.single('state', () => this.instance().state); if (typeof name !== 'undefined') { if (_state == null) { throw new TypeError(`ReactWrapper::state("${name}") requires that \`state\` not be \`null\` or \`undefined\``); } return _state[name]; } return _state; }

可以看到它的返回值是"动态读取"的：每次调用都会从当前组件实例上取instance().state，因此它始终反映组件当下的 state 快照，而不是创建 wrapper 时的旧值。

参数说明

对应官方文档的原始描述，见 docs/api/ReactWrapper/state.md：

Returns the state hash for the root node of the wrapper. Optionally pass in a prop name and it will return just that value.

从实现上看，参数判断用的是typeof name !== 'undefined'，也就是说传入null或undefined以外的任何值都会走"取单个字段"分支——state(null)会等价于state['null']，因此正常用法中要么不传参，要么传一个真实存在的字符串 key。

基础用法示例

官方文档给出的最小示例（docs/api/ReactWrapper/state.md）如下：

const wrapper = mount(<MyComponent />); expect(wrapper.state().foo).to.equal(10); expect(wrapper.state('foo')).to.equal(10);

两种写法等价：

• wrapper.state()返回{ foo: 10, ... }形式的完整 state 对象，通过.foo取字段；
• wrapper.state('foo')直接返回10，省去对象解构。

结合 packages/enzyme-test-suite/test/shared/methods/state.jsx 中的共享测试用例，可以归纳出更完整的实战场景：

class HasFooState extends React.Component { constructor(props) { super(props); this.state = { foo: 'foo' }; } render() { const { foo } = this.state; return <div>{foo}</div>; } } // 1. 返回整个 state 对象 const wrapper = mount(<HasFooState />); expect(wrapper.state()).to.eql({ foo: 'foo' }); // 2. state 发生变更后读取到的是最新值 wrapper.setState({ foo: 'bar' }); expect(wrapper.state()).to.eql({ foo: 'bar' }); // 3. 传入 key 只取单个字段 expect(wrapper.state('foo')).to.equal('bar');

第 2 个用例特别值得注意：setState之后再次调用state()拿到的是新值，这正印证了上文"动态读取"的实现细节。

使用限制与常见报错

state()并非可以在任何 wrapper 上随意调用，官方文档只给出了参数与示例，而完整的限制条件隐藏在源码与测试中，本节为你逐一梳理。

1. 只能用于类组件（Class Components）

若目标节点不是类组件（例如宿主节点<div>、函数组件 SFC、Portal），会抛出：

ReactWrapper::state() can only be called on class components

判定逻辑在 packages/enzyme/src/ReactWrapper.js：先检查this.instance() === null，再检查nodeType !== 'class'。测试用例覆盖了宿主节点与 React 16+ 的 Portal 场景（见 state.jsx）。

2. 传入 key 时 state 不能为null/undefined

如果实例的state为null或undefined却传入了key，会抛出TypeError：

ReactWrapper::state("foo") requires that `state` not be `null` or `undefined`

这是 ReactWrapper.js 中对_state == null的显式防御：读单个字段前必须先保证对象本身存在。

3. 多节点 wrapper 不允许调用

state()内部通过this.single('state', ...)执行（ReactWrapper.js），而single的职责是强制"wrapper 必须只包裹一个节点"（ReactWrapper.js）：

single(name, fn) { const fnName = typeof name === 'string' ? name : 'unknown'; const callback = typeof fn === 'function' ? fn : name; if (this.length !== 1) { throw new Error(`Method “${fnName}” is meant to be run on 1 node. ${this.length} found instead.`); } return callback.call(this, this.getNodeInternal()); }

例如wrapper.find('span')找到 3 个节点后调用spans.state()就会抛错，对应测试见 state.jsx。因此调用前应确保 wrapper 长度恰为 1（可用.first()、.at(index)收敛到单节点）。

4. ShallowWrapper 中额外的根节点限制

本文聚焦ReactWrapper，但需要注意：在浅渲染场景下，ShallowWrapper.state()还多一条限制——只能作用于根节点，非根 wrapper 调用会抛出：

ShallowWrapper::state() can only be called on the root

对应实现见 packages/enzyme/src/ShallowWrapper.js（该方法在this[ROOT] !== this时直接抛错）。而ReactWrapper因为基于真实 DOM 挂载、所有节点共享同一实例树，所以允许在子组件 wrapper 上读取到子组件自身的 state（测试见 state.jsx）。

与相关方法的配合使用

官方文档在 "Related Methods" 中列出了三个关联方法，完整入口见 docs/api/ReactWrapper/state.md：

• .props() => Object：返回根节点的 props 哈希对象，与state()互为"入参/内部状态"两个视角；
• .prop(key) => Any：按 key 取单个 prop，对应state('key')的 props 侧版本；
• .context([key]) => Any：按需读取组件上下文，签名与state([key])几乎一致（源码位于 ReactWrapper.js）。

在真实测试中，这三者常与.setState(nextState[, callback])配合：先用setState把组件推入难以通过交互到达的状态，再用state()断言结果。需要强调的是，官方文档在setState一节明确建议：能通过组件的外部 API（如.instance()暴露的方法）驱动状态时，优先走真实交互路径，setState/state这类直接操控手段应"尽量少用"（use sparingly），以保证测试尽可能贴近真实用户行为。

总结

ReactWrapper.state([key])是 Enzyme 断言组件内部状态的核心工具：不传参时返回根组件完整的 state 哈希，传 key 时精准取单个字段，且每次调用都读取实例最新值。使用时的三条红线需要牢记——目标必须是类组件、wrapper 必须恰好包裹一个节点（浅渲染下还必须是根节点）、传 key 时 state 不能为null/undefined。掌握这些边界与底层single机制后，你就能在测试中精准、稳定地验证组件的状态流转。

• 测试
• 前端