Итак, я начал использовать реагирующее-тестирование-библиотеку , и мне действительно нравится идея для проверки действий пользователя, не подробности реализации .
С чем я действительно борюсь, с чего начать тест? Чтобы быть более точным: на каком уровне в дереве компонентов я должен начать писать свои тесты?
Давайте рассмотрим следующий код в качестве примера:
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>
);
}
Для StepTwo и StepThree, просто представьте, что они похожи на StepOne.
ArticleForm, в приведенном выше примере объявляются все поля ввода и т. Д. и обновляет значения формы.
Представьте, что все компоненты намного сложнее, и не воспринимайте этот пример серьезно. Как правило, существует 3 уровня для написания тестов (от самого низкого до самого высокого уровня)
- Уровень формы aka
ArticleForm: проверка правильности обновления формы - Уровень шага aka
StepOne: тестируйте шаг независимо от других шагов, убедитесь, что вы можете перейти к следующему шагу только тогда, когда форма действительна - Уровень страницы aka
OrderCreatePage: проверить переходы шагов (включая проверки правильности) и проверить, можете ли вы создать заказ
Так с чего начать тестирование здесь?
Если вы пишете тест для ArticleForm, то вы не тестируете валидацию, поэтому вам нужно написать тесты для StepOne. Если вы уже написали тест для ArticleForm, вам нужно было бы скопировать логику заполнения полей ввода из этого теста, что делает ArticleFrom тесты бесполезными. Хорошо, давайте пропустим ArticleForm тесты.
Для переходов вам нужно протестировать OrderCreatePage сейчас. На этот раз вам необходимо скопировать логику ввода действительных / недействительных данных из StepOne (и StepTwo, StepThree) тестов, иначе вы не сможете выполнить / проверить переходы. Так что просто удалите тесты StepOne (и StepTwo, StepThree).
Но в результате получается большой тестовый файл для OrderCreatePage, который больше не подходит для юнит-теста.
Буду очень признателен за любую помощь, потому что у меня всегда возникают такие мысли ..