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

Question

[Natebash]

Есть кастомный компонент который прокидывается в формик и пропсами принимает в себя все аргументы 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;

Answer 1

[Alexandroppolus]

Поскольку из всего FieldProps ты юзаешь только field, можно так:

React.FC<CheckboxProps & Pick<FieldProps, 'field'>>

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

Comments

[Natebash]

А можно пример если не сложно? Или хотя бы показать часть доки? Я просто вообще 0 в тестировании, хотел бы глянуть правильное построение теста

[Alexandroppolus]

Natebash, вот интерфейс FieldInputProps

/** Field input value, name, and event handlers */
export interface FieldInputProps<Value> {
    /** Value of the field */
    value: Value;
    /** Name of the field */
    name: string;
    /** Multiple select? */
    multiple?: boolean;
    /** Is the field checked? */
    checked?: boolean;
    /** Change event handler */
    onChange: FormikHandlers['handleChange'];
    /** Blur event handler */
    onBlur: FormikHandlers['handleBlur'];
}

набросок теста:

import {render} from '@testing-library/react';
import React from 'react';
import type {FieldInputProps} from 'formik';

describe('test group', () => {
    it('test', async () => {
        const fieldStub: FieldInputProps<string> = {
            value: '...',
            name: 'name',
            onChange: jest.fn(),
            onBlur: jest.fn(),
        };

        const result = render(
            <Checkbox field={fieldStub} label={'label'}  />
        );

        expect(...).toBe***(...);
    });
});

describe может быть несколько, и в каждом из них несколько it. В каждом it рендерится тестовый элемент и делаются проверки через expect

в название файла обычно добавляют ".test" перед расширением, то есть конкретно здесь это может быть Checkbox.test.tsx

подробности всей этой кухни смотри в документации по jest и testing-library

[Alexandroppolus]

у тебя простой случай - компонент зависит только от пропсов. Может ещё, например, смотреть в контекст, тогда в рендере надо обернуть в провайдер контекста, а в значение положить заглушку.

в общем, большая тема, я и сам не очень в ней ведаю.

[Natebash]

Alexandroppolus, Спасибо, принцип понял. Сейчас буду накидывать