Question

我正在尝试在表单中测试输入字段。但是，当在输入字段中使用Enzyme.js到simulate更改时，state会被错误地更新，因为日志显示simulate函数已在名为{{1}的状态中创建了新记录我很乐意帮忙。

此致

初始组件状态如下所示：

undefined

这是测试功能：

this.state = {
    submission: {
        firstName: '',
        lastName: '',
        email: '',
        date: new Date(),
        validation: {
            email : {isInvalid: false, message: ""},
            firstName : {isInvalid: false, message: ""},
            isValid : true,
            lastName : {isInvalid: false, message: ""}
        }
    }
}

这是我期望的状态：

it('should respond to change event and change the state of the Component', () =>{
    const wrapper = shallow(<ApplicationForm/>);
    console.log(wrapper.find('#firstName').debug());

    wrapper.find('#firstName').simulate(
        'change', {
            target: {
                name: 'firstName',
                value: 'John'
            }
        }
    )

    expect(wrapper.state().submission.firstName).to.equal('John');
})

这是我用submission: { firstName: 'John', ... }

检查结果时得到的结果

debug

下面你可以看到渲染表格的代码：

submission: {
    firstName: '',
    lastName: '',
    email: '',
    date: new Date(),
    validation: {
        email : {isInvalid: false, message: ""},
        firstName : {isInvalid: false, message: ""},
        isValid : true,
        lastName : {isInvalid: false, message: ""}
    },
    undefined: 'John'
}

updateSubmission函数如下所示：

<input type="text"
    id="firstName"
    className="form-control form-control-sm"
    placeholder="First name"
    onChange={this.updateSubmission.bind(this)}
/>

Answer 1

updateSubmission处理程序使用target.id：

updatedSubmission[event.target.id] = event.target.value;

但在测试中您使用name：

        target: {
            name: 'firstName',
            value: 'John'
        }

修复测试target对象以使用id: 'firstName'应该修复它。（或者您可以在代码中切换到使用name。）

使用Enzyme.js模拟输入更改时的错误 - 状态错误udpated

1 个答案: