@GNG999

Почему не проходит тест в react компоненте?

есть компонент
import React, { FC, HTMLAttributes, useRef } from 'react';
import InputMask, { InputState, Props } from 'react-input-mask';
import { Field } from 'ui/forms';
import { findStart, firstFreeFn } from './uitls/inFirstFreePlace';

type MaskedFieldProps = {
    inputRef?: any;
    disabled?: boolean;
    autoFocus?: boolean;
    beforeMaskedValueChange?(
        newState: InputState,
        oldState: InputState,
        userInput: string
    ): InputState;
    mask: string;
} & Props;
/**
 * Поле ввода с произвольной маской. Поддерживает подсветку успешной/ошибочной валидации и вывод сообщения.
 */
const MaskedField: FC<MaskedFieldProps> = ({ inputRef, disabled, ...props }) => {
    const ref = inputRef ?? useRef<HTMLInputElement | null>(null);

    const lastFillLengthRef = useRef(0); // делаем запись в реф чтоб меж рендерами сохранять длину до которой уже заполнили

    const beforeMaskedValueChange = (
        newState: InputState,
        oldState: InputState,
        userInput: string
    ) => {
        let { value, selection } = newState; // Отформатированное значение формы
        const lastFillLength = oldState.value.indexOf('_');
        let returnData = {
            value,
            selection,
        };

        if (props.beforeMaskedValueChange) {
            returnData = props.beforeMaskedValueChange(newState, oldState, userInput);
        }

        lastFillLengthRef.current =
            lastFillLength > lastFillLengthRef.current ? lastFillLength : lastFillLengthRef.current;

        returnData = firstFreeFn(
            returnData.value,
            selection?.start,
            lastFillLengthRef.current,
            props.mask
        );

        return returnData;
    };

    return (
        <InputMask
            disabled={disabled}
            onClick={(e) => {
                //@ts-ignore
                const start = findStart(
                    //@ts-ignore
                    e.target.value,
                    //@ts-ignore
                    e.target.selectionStart,
                    lastFillLengthRef.current,
                    props.mask
                );
                //@ts-ignore
                e.target.selectionStart = start;
                //@ts-ignore
                e.target.selectionEnd = start;
            }}
            {...props}
            beforeMaskedValueChange={beforeMaskedValueChange}
        >
            {/* @ts-ignore */}
            {(inputProps) => (
                <Field
                    {...(inputProps as HTMLAttributes<HTMLInputElement>)}
                    disabled={disabled}
                    inputRef={ref}
                />
            )}
        </InputMask>
    );
};

export { MaskedField };
export default MaskedField;


Написал тест на него

it('renders properly with "autoFocus" props', () => {
        const onPaste = jest.fn();
        const onFocus = jest.fn();
        const beforeMaskedValueChange = (
            newState: InputState,
            oldState: InputState,
            userInput: string
        ) => ({
            value: '',
            selection: null,
        });
        const onClick = (e: MouseEvent) => {};
        const { container } = render(
            <MaskedField
                mask={'9999'}
                beforeMaskedValueChange={beforeMaskedValueChange}
                onPaste={onPaste}
                onFocus={onFocus}
            />
        );

        expect(inpMask).toHaveBeenCalledWith(
            {
                mask: '9999',
                beforeMaskedValueChange,
                onPaste,
                disabled: undefined,
                onFocus,
                onClick,
                children:expect.any(Function),
            },
            {}
        );
    });


Выходит ошибка

Error: expect(jest.fn()).toHaveBeenCalledWith(...expected)

- Expected
+ Received

@@ -1,8 +1,8 @@
  Object {
    "beforeMaskedValueChange": [Function beforeMaskedValueChange],
-   "children": [Function children],
+   "children": [Function anonymous],
    "disabled": undefined,
    "mask": "9999",
    "onClick": [Function onClick],
    "onFocus": [Function mockConstructor],
    "onPaste": [Function mockConstructor],,
  {},

Number of calls: 1
  • Вопрос задан
  • 80 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
22 нояб. 2024, в 03:54
1500 руб./за проект
22 нояб. 2024, в 02:56
10000 руб./за проект
22 нояб. 2024, в 00:55
500 руб./за проект