How to test ReactJs forms?

Question

JavaScript

Hello. It is required to write a test for the login form component in React.
Actually wrote the test.

it("Do login process", function() {
    let Subject = StubRouterContext(Login);
    let login = TestUtils.renderIntoDocument(<Subject />);

    let button = TestUtils.findRenderedDOMComponentWithTag(login, 'button');
    let inputs = TestUtils.scryRenderedDOMComponentsWithClass(login, 'form-control');

    TestUtils.Simulate.change(inputs[0], { target: { value: 'input0' } });
    TestUtils.Simulate.change(inputs[1], { target: { value: 'input0' } });

    expect(button.getDOMNode().textContent).to.be.equal('Sign in')
    expect(inputs[0].getDOMNode().value).to.be.equal('input0');
    expect(inputs[1].getDOMNode().value).to.be.equal('input1');
  });

The test crashes when checking inputs[0] and inputs[1]. It seems that the function for filling in the input field does not work.
PS Maybe someone has a video or reading with a detailed description of the different component tests? I will be glad if you share.

Answer 1

I don't know if it's hardcode or not. But I solved it with the following code

it("Do login process", function() {
    let Subject = StubRouterContext(Login);
    let login = TestUtils.renderIntoDocument(<Login />);

    let button = TestUtils.findRenderedDOMComponentWithTag(login, 'button');
    let inputs = TestUtils.scryRenderedDOMComponentsWithClass(login, 'form-control');

    inputs[0].getDOMNode().value = "input0";
    inputs[1].getDOMNode().value = "input1";

    TestUtils.Simulate.change(inputs[0].getDOMNode());
    TestUtils.Simulate.change(inputs[1].getDOMNode());

    expect(inputs[0].getDOMNode().value).to.be.equal('input0');
    expect(inputs[1].getDOMNode().value).to.be.equal('input1');
  });