есть компонент
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