reactjs - 安装包含 React Final Form 和酶的反应组件
问题描述
如何安装使用 React Final Form 的组件?当我在 LoginComponent 中评论时,它正确安装,但我想安装整个组件。我希望 albo 测试 validate 和 handleLoginFormSubmit 函数是否正常工作。
我的组件代码:
const LoginForm = () => {
const dispatch = useDispatch();
const history = useHistory();
const { loading, isLogged, errorMessage } = useSelector(state => state.auth);
useEffect(() => {
if (isLogged) {
history.push('/');
}
return () => {
dispatch(clearErrorMessage());
};
}, [dispatch, history, isLogged]);
const handleSubmitLoginForm = values => { };
const validate = ({ password }) => { };
return (
<article className="login-form-wrapper">
<h2>Sign in</h2>
<Form onSubmit={handleSubmitLoginForm} validate={validate}>
{({ handleSubmit }) => (
<form onSubmit={handleSubmit} autoComplete="off" className="login-form">
<div className="login-form__field">
<Field name="email" component={Input} type="email" label="E-mail" />
</div>
<div className="login-form__buttons">
<button type="submit" className={loading ? 'button-disabled' : ''}>
Sign in
</button>
</div>
</form>
)}
</Form>
</article>
);
};
我的测试:
it('should contain proper text in header', () => {
const store = mockStore({
auth: {
loading: false,
isLogged: false,
errorMessage: ''
}
});
const wrapper = mount(
<Provider store={store}>
<MemoryRouter initialEntries={['/account/login']}>
<LoginForm />
</MemoryRouter>
</Provider>
);
console.log(wrapper.debug());
//expect(wrapper.find('h2').text()).toEqual('Sign in');
});
我应该在测试中包装 LoginForm 吗?寻找任何建议;)
解决方案
推荐阅读
- sql - 使用一个数据表中的值作为另一个表的输入,其中 sql 中的命令
- postgresql - Deno 与 Postgres:另一个接受任务正在进行中
- java - 如何为 recyclerview 中的每个项目添加微调器?
- c# - 作为 C# 方法参数传递的动态属性
- html - 关于html中位置的一些问题
- angular - Angular formly select显示来自后端api调用的空白下拉列表
- javascript - 卡在 onclick 向画布元素
- css - React - 淡入 div,暂停和淡出 div
- javascript - 平滑滚动不起作用(JavaScript)和一些错误
- c# - “无法将‘PanelNamingContainer’类型的对象转换为‘Telerik.Web.UI.GridItem’类型”