Test a form in React with jest and enzyme

Question

I'm totally lost trying to test a simple form made with React, how do I know if the submit button is working? After some research I thought that the way to do it is to make a mock function and then check if it was called but I'm pretty sure I'm doing it completely wrong.

onObjSubmit(event){
event.preventDefault()
..... (fetch something)
}

render(){
  return (
    <form id="myForm" onSubmit={event => this.onObjSubmit(event)}>
     <input type="text" id="name" /><br />
     <input type="text" id="last_name" /><br />
     <input type="submit" value="submit">
    </form>
  );
}

And the test:

it('Test', () => {
  const wrapper = shallow(<TestComp />);
  const fn = jest.fn();
  wrapper.instance().onObjSubmit = fn;
  wrapper.update();
  wrapper.find('#myForm').simulate('submit');
  expect(fn).toBeCalled();
});

Can someone please point me in the right direction?

boylingpoynt · Accepted Answer · 2017-11-22 02:31:01Z

1

You're not the only one who feels lost with this one. This thread on Enzyme's issues page has a lot of suggested approaches to solving this problem.

answered Nov 22, 2017 at 2:31

boylingpoynt

2442 silver badges5 bronze badges

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

1 Comment

isherwood Over a year ago

Links to vague external resources are not considered valuable to the community. Please post the relevant information here, in your question.

Collectives™ on Stack Overflow

Test a form in React with jest and enzyme

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related