Question

我有一个具有功能的组件，该组件可以验证输入元素onblur并在验证失败时添加错误类：

TableRows = (props )=>(
 return  <input class="inputElement" onBlur="this.validate()" />
)

验证功能如下：

validate = async ({ target }: ChangeEvent<HTMLInputElement>) => {
        try {
            const element = target;
            this.setState({ loading: true });
            const { value } = target;
            const match = value.match(/^\d+(?:\.\d{0,2})?$/g);
            if (!match || match.length === 0) {
                element.className += ' inputError';
            } else {
                element.className = target.className.replace(' inputError', '');
            }

            const { data: updatedValues } = await sendforSaving({inputValue: value});
            this.setState({ newValues: data });
        } finally {
            this.setState({ loading: false });
        }
    };

我正尝试用酶编写如下单元测试：

it('should add error class on invalid input onblur', () => {
        const mockVal4Test = {
            localCurrency: 'USD',
            value: '20.02.1',
        } as any;
        component = shallow(
            <TableRows {...defaultProps} initialValues={mockVal4Test} currencyType={CurrencyType.LOCAL} />
        );
        const myInput = component.find('.inputElement');
        myInput.simulate('blur');
        expect(saleTarget.hasClass('inputError')).toBe(true);
    });

我得到了myInput元素，但是在模拟模糊之后，我希望调用'validate'函数并将错误类“ inputError”添加到该元素。

Answer 1

我将模拟事件用于模糊事件以进行模拟。稍后，当blur事件更改传递的事件对象时，将使用相同的模拟事件检查更改。这是我的解决方法。

it('should add error class on invalid input for StoreTarget input on blur', () => {
        component = shallow(
        <TableRows {...defaultProps} initialValues={mockVal4Test} currencyType={CurrencyType.LOCAL} />
    )
        const mockedEvent = { 
            target: { 
                value: '1.2.1.2', 
                className:'inputClass'
            }
        } as any;
        const myInput = component.find('. inputElement');
        myInput.simulate('blur',  mockedEvent );
        expect(mockedEvent.target.className.includes('inputError')).toBe(true);
    });

用酶进行反应单元测试，测试onBlur功能

1 个答案: