Модульный тест React Number Format с isAllowed

Question

Я использую формат числа реакции для ввода числовых полей.

         <TargetRow>
                   <NumberFormat
                        type="text"
                        isNumericString={true}
                        decimalScale={2}
                        name="otbTarget"
                        value={otbTarget === null ? '' : otbTarget}
                        className="TargetRow__input TargetRow__otbTarget"
                        onBlur={this.updateTarget}
                        onChange={this.handleChangeOTBTarget}
                        isAllowed={this.limitInputValue}
                    />

         />

функция для isAllowed предназначена для ограничения длины значений, вводимых в поле.

limitInputValue = ({ value }: NumberFormatValues ) =>  value.length <= ALLOWED_INPUT_LENGTH;

Мне нужно написать модульный тест для этой функциональности, чтобы проверить, ограничиваются ли значения, введенные в поле с NumberFormat , с помощью метода isAllowed.

Я попытался использовать имитацию фермента для изменения, но, как оказалось, он вызывает метод handleChangeOTBTarget, который соответствует ожиданиям.

Я не могу понять, как будет срабатывать isAllowed.

Единичный тест, который я пишу:

it('should restrict values with ALLOWED_INPUT_LENGTH', async () => {
    // ALLOWED_INPUT_LENGTH = 3
    const mockTarget = 1234512345;
    component = shallow(<TargetRow {...defaultProps} otbTarget={mockTarget} />); 

    const targetInput = component.find('.TargetRow__otbTarget');
    targetInput.simulate('change', { target: { value: mockTarget } });
    targetInput.simulate('blur');
    expect(targetInput.props().value).toBe( 123 );
});

Как видите, есть способ имитировать onchange, который работает, как указано выше. Но я не могу запустить метод, который находится на isAllowed

Answer 1

Я бы сделал примерно следующее:

it('should restrict values with ALLOWED_INPUT_LENGTH', async () => {
    const isValid
    // ALLOWED_INPUT_LENGTH = 3
    const mockTarget = 1234512345;
    component = shallow(<TargetRow {...defaultProps} otbTarget={mockTarget} />);
    component.instance().limitInputValue = jest.fn();  // MOCK THE METHOD WE ADD TO isAllowed prop
 


    const targetInput = component.find('.TargetRow__otbTarget');
    targetInput.simulate('change', { target: { value: mockTarget } });
    targetInput.simulate('blur');
    expect(targetInput.props().value).toBe( 123 );
    expect(component.instance().limitInputValue).toHaveBeenCalled() // Check if the method has been called at all
});