2

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 };
    }
be-codified
  • 5,704
  • 18
  • 41
  • 65

1 Answers1

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';
Dmitriy Nevzorov
  • 6,042
  • 1
  • 20
  • 28