我试图通过在表单上设置状态并提交来测试表单。由于某些原因,当我调用wrapper.setState函数时,它并没有在实际组件上设置状态。
控制台日志wrapper.instance返回具有正确模拟状态的对象。因此,包装程序的状态似乎是正确的,但是,当我实际上在组件本身上提交表单时,模拟状态不会转移。我不明白为什么。
我的测试
it("should dispatch a register action on form submit", () => {
let mock_user = { user: {
firstName: 'mockFN',
lastName: 'mockLN',
userName: 'mockUN',
password: 'mockPW'
} };
userActions_spy = jest.spyOn(userActions, 'register');
wrapper = mount(<Router><Register {...props} /></Router>);
wrapper.setState(mock_user, () => {
console.log("Wrapper", wrapper.instance());
wrapper.find('#register').simulate('submit');
expect(userActions_spy).toHaveBeenCalled();
});
});
我的组件-用户提交表单时调用此函数。此处的控制台日志将返回初始状态,而不是我的模拟状态,因此代码不会进入if语句逻辑。
submitForm = (e) => {
e.preventDefault();
const { user } = this.state;
const { dispatch } = this.props;
console.log("USER", this.state);
if (user.firstName && user.lastName && user.userName && user.password) {
this.props.dispatch(userActions.register(user));
if(this.props.error === "") {
this.props.history.push("/login");
}
} else {
this.props.dispatch(userActions.error("Form Incomplete"));
}
}