reactjs - Enzyme/Jest onSubmit 不调用提交函数
问题描述
我无法检查是否从表单上的 onSubmit 调用了我的模拟操作:
登录表单:
class Login extends Component {
constructor(props) {
super(props);
this.state = {
email: "",
password: "",
};
}
handleSubmit = e => {
e.preventDefault();
this.props.loginUser(this.state.email, this.state.password);
};
handleChange = event => {
const { value } = event.target;
const { name } = event.target;
this.setState({
[name]: value,
});
};
render() {
const { t } = this.props;
return (
<div className="login-container>
<form data-test-id="login-form" onSubmit={this.handleSubmit}>
<TextComponent
label="Email"
testId="login-email"
value={this.state.email}
handleChange={this.handleChange}
/>
<div className="my-3" />
<TextComponent
label="Password"
testId="login-password"
value={this.state.password}
handleChange={this.handleChange}
/>
<button action="submit" data-test-id="login-button">
{t("en.login")}
</button>
</form>
</div>
);
}
}
function mapStateToProps(state) {
return {
authenticated: state.login.authenticated,
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({ loginUser }, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(withTranslation()(Login));
测试:
import { mount, shallow, render } from "enzyme";
import React from "react";
import { Provider } from "react-redux";
import { I18nextProvider } from "react-i18next";
import { Router } from "react-router-dom";
import { findByTestAtrr, testStore } from "../../test/utils/utils";
import Login from "../../src/Login/index";
import i18n from "../../src/i18n";
import history from "../../src/history";
const setUp = loginUser => {
const initialState = {
login: {
authenticated: true,
},
};
const store = testStore(initialState);
const wrapper = mount(
<I18nextProvider i18n={i18n}>
<Provider store={store}>
<Router history={history}>
<Login onSubmit={loginUser} />
</Router>
</Provider>
</I18nextProvider>
);
return wrapper;
};
describe("submit button", () => {
let emailInput;
let passwordInput;
let submitButton;
let newWrapper;
let loginAction;
beforeEach(() => {
loginAction = jest.fn();
newWrapper = setUp(loginAction);
emailInput = findByTestAtrr(newWrapper, "login-email");
emailInput.instance().value = "email.com";
emailInput.simulate("change");
passwordInput = findByTestAtrr(newWrapper, "login-password");
passwordInput.instance().value = "password";
passwordInput.simulate("change");
submitButton = findByTestAtrr(newWrapper, "login-button");
});
it("login action is called", () => {
console.log(submitButton.debug());
submitButton.simulate("submit");
expect(loginAction).toHaveBeenCalledTimes(1);
});
});
});
我能够模拟向电子邮件和密码添加值,但我无法模拟 onClick 工作。我是否错误地测试了提交功能?
这是我 console.log 时的提交按钮
console.log __tests__/integration_tests/login.test.js:97
<button action="submit" data-test-id="login-button">
Log in
</button>
错误:
期望(jest.fn()).toHaveBeenCalledTimes(预期)
Expected number of calls: 1
Received number of calls: 0
解决方案
正如 2016 年在 github 上提出的:Simulated click on submit button in form does not submit form #308,这个问题仍然存在于我的项目中,使用 Jest + Enzyme (2020)。
有一些解决方法,例如使用tape
or sino
。
另一种解决方案是在不使用模拟的情况下获取 DOM 元素并触发点击(转到给定的链接,向下滚动线程以了解更多信息)。
如果有人找到模拟表单提交的解决方案,请在此处标记我。谢谢你。
推荐阅读
- javascript - 向下滚动时无限滚动不起作用
- spring - 在 Hibernate 中使用 GeneratedValue 和 GenericGenerator 自定义注释
- azure - 有没有办法在 YML 中使用 Azure Artifacts 触发管道?
- c++11 - 模板方法中可调用对象的最佳类型是什么?
- amazon-web-services - 将 PutRecords 直接发布到 kinesis API,无需(真实)身份验证
- sql-server - Postgresql - 从 CTE 输出更新 CTE 结果?
- reactjs - 尝试在 React Native 中呈现数据的空数组
- assembly - 16 字节宽的 VTBL 是否有 Armv8-A 内在函数?
- mongodb - Mongodb嵌套if条件以获取计数
- javascript - 使用 .includes(ARRAY 的值)获取地图