无法与模拟输入酶测试最大长度(unable to test maxLength with mock

我想测试Input JSX元素maxLength 。 我在react-元素

const ValidatedInput = ({ name, labelName, value, onChange, disabled, maxLength = 10 }) => {
    return (
        <div className="form-group">
            <label className="form-control-label" htmlFor={name}>
                {labelName}
            </label>
            <Input className="form-control" type="text" id={name} name={name} value={value} autoComplete="off"
                onChange={onChange}
                disabled={disabled}
                maxLength={maxLength}
            />
        </div>
    )
};

我的测试是

it('should not content more that 10 characters', () => {
        const wrapper = mount(<ValidatedInput onChange={()=> {return true;}}
            id={'testInput'}
            value={'1234567890extra'}
            />);
        expect(wrapper.find('input').instance().value).toBe('1234567890');
});

我打印的值在控制台上这是'1234567890extra'和不'1234567890'时，从UI手动测试，同时，它完美地工作。

Answer 1:

该代码使用max为丙Input 部件 ，而它是maxlength为input 元件 。

酶不具备的功能设置输入值 。 和设定通过值value （既属性和丙）绕过maxlength限制，这是仅用于用户输入。 请注意， 它不会应用到初始value的道具 ，这证明假设是如何maxlength的作品是错误的。 的值应该在它被存储在数据库被附加地限制。

单元测试（其中酶是）一个正确的做法是不测试固有的浏览器行为或其他库，这应该被保存端到端测试。 这是可能的测试ValidatedInput提供正确的maxlength为input有：

expect(wrapper.find('input').prop('maxlength')).toBe(10);

文章来源: unable to test maxLength with mock input enzyme