首页 > 解决方案 > 如何测试 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;

标签: javascriptreactjsunit-testingjestjs

解决方案


推荐阅读