用酶反应单元测试，测试 onBlur 功能答案

【问题标题】：React unit test with enzyme, test onBlur functionality用酶反应单元测试，测试 onBlur 功能
【发布时间】：2020-11-17 18:03:30
【问题描述】：

我有一个组件，它具有验证输入元素 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 元素，但在模拟模糊之后，我期望调用“验证”函数并将错误类“inputError”添加到元素中。

【问题讨论】：

标签： reactjs unit-testing jestjs enzyme

【解决方案1】：

我使用了一个模拟事件来传递模糊事件来模拟。稍后使用相同的模拟事件来检查更改，因为模糊事件更改了传递的事件对象。这是我的解决方案。

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);
    });

【讨论】：