Approach to react component consisting of 3 subcomponents with form

I am currently doing my first FE project I am supposed to create completely by myself.

I have a component which is supposed to hold 3 subcomponents, each of them is supposed to show a form.

Currently I have chosen approach I was pretty happy with, but then I started to think about testing, and I realised I am basicly not able to create a test for parent component, without a dependence on child components. The parent component is something like this:

return (
<div className="personal-data-step-wrapper">
  {currentForm === 0 && <UserDataForm handleChangeForm={handleChangeForm}
                                      setValues={setUserDataFormValues}
                                      defaultValues={userDataFormValues}/>}
  {currentForm === 1 && <CertificateDataForm handleChangeForm={handleChangeForm}
                                             setValues={setCertificateDataFormValues}
                                             defaultValues={certificateDataFormValues}/>}
  {currentForm === 2 && <QSCDDeviceDataForm onStepFinish={onFinish}
                                            handleChangeForm={handleChangeForm}
                                            setValues={setQSCDeviceDataFormValues}
                                            defaultValues={qSCDDeviceDataFormValues}/>}
</div>
)

And then in a child component:

const onFinish = () => {
setValues({
  documentType: form.getFieldValue("documentType"),
  documentIssueDate: form.getFieldValue("documentIssueDate"),
  documentFullName: form.getFieldValue("documentFullName"),
  documentNumber: form.getFieldValue("documentNumber"),
  documentAddress: form.getFieldValue("documentAddress")
})
handleChangeForm(1)

}

You can see that changing between forms is done in child components, after it's successful submission or when switching to previous form. After last form is submitted, parent component gathers data of all child forms into an single object and call a repository interface function with it.

When I try to create a test which should test switching between components, I am forced to find a button of rendered child component and I feel like this is a wrong approach.

So my question would be: How am I supposed to handle such a task? Is my approach correct, or is it fundamentaly wrong?

Thank you for all suggestions and replies..



Read more here: https://stackoverflow.com/questions/64953823/approach-to-react-component-consisting-of-3-subcomponents-with-form

Content Attribution

This content was originally published by Ondra Mastik at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: