Ошибка при имитации изменения ввода с Enzyme.js - состояние неправильно обновлено

Question

Я пытаюсь проверить поля ввода в форме.Однако при использовании изменения поля ввода от Enzyme.js до simulate значение state обновляется неправильно, поскольку журнал показывает, что функция simulate создала новую запись в состоянии с именем 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'
}

Ниже вы можете увидеть код предоставленной формы:

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

Функция updateSubmission выглядит следующим образом:

updateSubmission(event) {
    let updatedSubmission = Object.assign({}, this.state.submission);

    updatedSubmission[event.target.id] = event.target.value;
    this.setState({
        submission: updatedSubmission
    });
}

Answer 1

Обработчик updateSubmission использует target.id:

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

, но в тесте вы используете name:

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

Исправление объекта теста target для использованияid: 'firstName' должен это исправить.(Или вы можете переключиться на использование name в вашем коде.)