On which level should I start/stop writing tests? - reactjs

Question

So I started to use react-testing-library and I really like the idea to test user actions, not implementation details.
What I'm really struggling with is where to start writing test ? To be more precise: on which level in the component tree I should start writing my tests?
Let's take the following code es an example:
OrderCreatePage
function CreateOrderPage() {
const [stepOneFrom, setStepOneForm] = useState({});
const [stepTwoFrom, setStepTwoForm] = useState({});
const [stepThreeFrom, setStepThreeForm] = useState({});
const [step, setStep] = useState(1);
const previousStep = () => {
setStep(prev => prev - 1);
}
const nextStep = () => {
setStep(prev => prev + 1);
}
const createOrder = () => {
endpoint.createOrder({
stepOneForm,
stepTwoForm,
stepThreeForm
});
}
return (
<div>
{step === 1 &&
<StepOne
form={stepOneForm}
onNextStep={nextStep}
onFormChange={setStepOneForm}
/>
}
{step === 2 &&
<StepTwo
form={stepTwoForm}
onNextStep={nextStep}
onPreviousStep={previousStep}
onFormChange={setStepTwoForm}
/>
}
{step === 2 &&
<StepTwo
form={stepTwoForm}
onPreviousStep={previousStep}
onCreateOrder={createOrder}
onFormChange={setStepTwoForm}
/>
}
</div>
);
}
StepOne
function StepOne(props) {
const isValidForm() => {
return // do some checks on props.form
}
const handleNextClick = () => {
if(isValidForm()){
props.onNextStep();
}
}
return (
<div>
<ArticlesForm form={props.form} onFormChange={props.onFormChange}/> // StepTwo and StepThree e.g. have DeliveryForm and PaymentForm
<button onClick={props.nextStep}>Next</button>
</div>
);
}
For StepTwo and StepThree, just imagine them to be similar to StepOne.
ArticleForm in the above example is declaring all the input fields etc. and is updating the form values.
Think of all components to be much more complex and don't take this example to serious. In general there are 3 level to write the tests (from lowest to highest level)
Form-level aka ArticleForm: test if form is updated properly
Step-level aka StepOne: test step independently from other steps, ensure that you are only allowed to go to next step when form is valid
Page-level aka OrderCreatePage: test transitions of steps (including validation checks) and check if you can create the order
So where to start testing here?
If you write test for ArticleForm then you don't test validation, thus you need to write tests for StepOne. If you already wrote test for ArticleForm you would need to basically copy the logic of filling the input fields from that test which make ArticleFrom tests kind of useless. Okay let's skip ArticleForm tests then.
For the transitions you need to test OrderCreatePage now. This time you need to copy the logic of entering valid/invalid data from StepOne (and StepTwo, StepThree) tests, otherwise you are not able to proceed/check transitions.
So just remove the StepOne (and StepTwo, StepThree) tests.
But this result in a big test file for OrderCreatePage and that's not anywhere close to a unit test any more.
I would really appreciate any help here, because I always end up with this kind of thoughts..

Answer 1

Well there is no formula for writing good and efficient tests, some measure coverage and then you should start testing the form-level to reach a good coverage percentage.
I like the approach of the author of the library you are using (react-testing-library) https://kentcdodds.com/blog/write-tests
Write tests. Not too many. Mostly integration.
With your example I would try to look at it not from the code perspective, but from a user perspective :
happy flow : User should be able to complete all steps and submits the form (some mocking might be necessary there)
edge case: User should not be able to create order if not all fields are completed / step not validated etc.
In general there are many right answers to this question so keep an open mind, experiment and learn, there is no silver bullet here