javascript - 如何测试 OnFinish 等功能组件内的功能,以及更新等
问题描述
我有一个组件模板。在 Template 组件中,我定义了另外两个函数。我想使用 jest、酶来测试onFinish、updateProviderEmailTemplate函数,但我不测试它。谁能帮助我如何在模板组件中测试这些功能。在类组件中,我曾经测试过这些实例,但我不知道如何使用功能组件对其进行测试。
const Template = () => {
const { isLoading, placeholderList, templateData } = useTemplateData(
new ProviderEmailTemplateService()
);
const [convertedContent, setConvertedContent] = useState(null);
const providerEmailTemplateService = new ProviderEmailTemplateService();
const updateProviderEmailTemplate = async (id, subject, content) => {
try {
const response = await providerEmailTemplateService.updateProviderEmailTemplate(
id,
subject,
content
);
notificationHelper("success", uiLabel.SUCCESS_TITLE, response.message);
} catch (error) {
notificationHelper("error", uiLabel.ERROR_TITLE, error.message);
}
};
const onFinish = async () => {
if (convertedContent === templateData.content) return;
updateProviderEmailTemplate(
templateData.id,
templateData.subject,
convertedContent
);
};
return (
<div className="template">
<Form name="basic" onFinish={onFinish}>
{templateData &&
templateData?.content &&
!isLoading &&
placeholderList.length !== 0 ? (
<>
<CustomEditor
setConvertedContent={setConvertedContent}
content={templateData.content}
placeholderList={[
<CustomEditorToolBar
optionList={[...placeholderList]}
toolBarName="Insert field"
/>,
]}
/>
</>
) : (
<LoadingSpinner isShowing={isLoading} />
)}
<Form.Item>
<div className="d-flex justify-content-end">
<Button type="primary" htmlType="submit">
Save
</Button>
</div>
</Form.Item>
</Form>
</div>
);
};
export default Template;
解决方案
推荐阅读
- eigen - eigen 的 completeOrthogonalDecomposition 和 colPivHouseholderQr 解决方案的可重复性如何?
- python - 优化视频帧的曼哈顿距离计算
- javascript - Greasemonkey 用户脚本被内容安全策略阻止
- java - 当我在 Thymeleaf 的表单标签中同时使用 th:action 和 method 属性时,它给了我例外
- netlify - FaunaDB 更新记录只更新 ts(timestamp),没有其他改变
- go - 如何将接口内的值转换为golang中的地图?
- delphi - Delphi 控制台应用程序:如何将 OnHelp 添加到消息对话框?
- reactjs - ReactJS 中的单元测试功能
- ansible - 为什么 ansible 不适用于 vmware 模块?
- firebase - 在 Firestore 中创建 UID 作为字段