看到一个奇怪的问题,其中 prevState
在 componentDidUpdate
中未定义,但在组件在浏览器中运行时定义。
我在构造函数中设置了状态,并且在 componentDidUpdate 中检查了 prevState
上的值。
componentDidUpdate(prevProps, prevState) {
const { showForm } = this.state;
if (prevState.showForm && !showForm) {
return this.input.current.focus();
}
}
这是 enzyme 测试:
it("should call focus on input if form was shown, and now form is open", () => {
component = mount(<Component {...props} />);
const prevProps = component.props();
const prevState = {
...component.state(),
showForm: true
};
const focusSpy = sinon.spy(component.instance().input.current, "focus");
component.instance().componentDidUpdate(prevProps, prevState);
expect(focusSpy).to.have.been.called;
});
这种方法有效 - 但只是因为我从 enzyme 测试中调用 componentDidUpdate
并传递它 prevState
。
理想情况下,我想避免这种情况 - 只需定义 prevState - 就像组件在浏览器中实际工作时一样。
处理这个问题的模式是什么?
最佳答案
您的测试不应显式调用 componentDidUpdate
。下面是一个组件和测试,我已经验证它只是多次调用 setState
来触发要测试的场景。
MyComp.js
import React from "react";
class MyComp extends React.PureComponent {
constructor(props) {
super(props);
this.state = { showForm: false };
this.input = React.createRef();
}
toggleShowForm = () => {
this.setState({ showForm: !this.state.showForm });
};
componentDidUpdate(prevProps, prevState) {
console.log(
"componentDidUpdate prevProps: " +
JSON.stringify(prevProps) +
"; prevState: " +
JSON.stringify(prevState) +
"; this.state: " +
JSON.stringify(this.state)
);
if (prevState.showForm && !this.state.showForm) {
console.log("setting focus");
this.input.current.focus();
}
}
render() {
return (
<>
<input type="text" ref={this.input} />
<br />
<button onClick={this.toggleShowForm}>Toggle showForm</button>
</>
);
}
}
export default MyComp;
MyComp.test.js
import React from "react";
import { mount } from "enzyme";
import MyComp from "./MyComp";
import sinon from "sinon";
it("should call focus on input if showForm goes from true to false", () => {
const myCompWrapper = mount(<MyComp />);
console.log("before first setState");
const focusSpy = sinon.spy(myCompWrapper.instance().input.current, "focus");
myCompWrapper.instance().setState({ showForm: true });
expect(focusSpy.called).toEqual(false);
console.log("before second setState");
myCompWrapper.instance().setState({ showForm: false });
expect(focusSpy.called).toEqual(true);
});
以下是此测试生成的控制台日志:
- 第一次 setState 之前
- componentDidUpdate prevProps: {}; prevState: {"showForm":false}; this.state: {"showForm":true}
- 第二次 setState 之前
- componentDidUpdate prevProps: {}; prevState: {"showForm":true}; this.state: {"showForm":false}
- 设置焦点
这是一个 CodeSandbox,您可以在其中执行此测试:
关于javascript - prevState 在 enzyme 测试中未定义,但在组件中定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54190553/