React testing: Change value of input field

Question

I can not set the value of input field. What am I doing wrong? If any more information is needed, please tell me so. Thank you.

describe('SignUpComp', () => {
    let signUpComp, node;

    beforeEach(() => {
        signUpComp = TestUtils.renderIntoDocument(<SignUp />);
        node = ReactDOM.findDOMNode(signUpComp);
    });

    // First name
    it('it should trigger error `min chars` if input firstName is too short', () => {
        let elements = selectElements('firstName');

        TestUtils.Simulate.change(elements.input, { target: { value: 'abc' } });
        console.log(elements.input); // I can not see the change
        console.log(node); // I can not see the change

        expect(elements.error.textContent).to.equal(errorMsg.tooShort('First name', 2));
    });

    function selectElements(element) {
        let input = node.querySelector('#' + element);
        let error = node.querySelector('#' + element + '+ p');

        return { input, error };
    }

Dmitriy Nevzorov · Accepted Answer · 2016-08-13 15:18:59Z

0

I recommend you to take a look at enzyme, it significantly simplifies testing react components.

With enzyme you can do simply:

const form = mount(<MyComponent />);
const input = form.find('input').get(0);
input.value = 'Blah blah';

answered Aug 13, 2016 at 15:18

Dmitriy Nevzorov

6,0881 gold badge24 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dǝɥɔS ʇoıןןƎ Over a year ago

"With {insert something the question isn't asking about here} it's easy!" You think they would have already tried this if it was so easy

Collectives™ on Stack Overflow

React testing: Change value of input field

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related