Как тестировать формы ReactJs?

Question

[Максим Антонихин]

Всем привет. Требуется написать тест на компонент логин формы на реакте.

Собственно написал тест.

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

Тест вылетает ошибкой при проверке inputs[0] и inputs[1]. Кажется, что не срабатывает функция по заполнению поля ввода.

P.S. Может у кого-то есть видео или чтиво с подробным описанием разных тестов компонентов? Буду рад, если поделитесь.

Answer 1

[Максим Антонихин]

Незнаю, хардкод или нет. Но решил следующим кодом

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