Natebash
@Natebash
React, Vue, Angular, Navite JS, Python / Node JS

Как протестировать кастомный компонент формика с Jest?

Есть кастомный компонент который прокидывается в формик и пропсами принимает в себя все аргументы fields
Как правильно тестировать данный компонент? Если даже для отрисовки его с помощью jest\react testing library требуется прокинуть в него обязательные fields. Как правильно мокать?
import React from 'react';
import {FieldProps} from 'formik';

interface CheckboxProps {
  label?: string;
  disabled?: boolean;
  customClasses?: string;
  labelId?: string;
}

const Checkbox: React.FC<CheckboxProps & FieldProps> = (props) => {
const {field, label, labelId, disabled, customClasses} = props;
return (
    <div className={`custom-checkbox ${customClasses ? customClasses : ''}`}>
        <input { ...field } type="checkbox" id={labelId || field.name+label} disabled={disabled}/>

        <label htmlFor={labelId || field.name+label}>
            {label && <span>{ label }</span>}
        </label>
    </div>
)
}

export default Checkbox;
  • Вопрос задан
  • 45 просмотров
Пригласить эксперта
Ответы на вопрос 1
Alexandroppolus
@Alexandroppolus
кодир
Поскольку из всего FieldProps ты юзаешь только field, можно так:
React.FC<CheckboxProps & Pick<FieldProps, 'field'>>


а в тестах создать заглушку, которая соответствует FieldInputProps (это тип для поля field), и просунуть в пропсы в тестовом рендере.
Собственно, ничего необычного, всё банально.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы