I'm very new to front-end/unit testing and have been having a difficult time understanding the point altogether, but I managed to push my way through testing literally everything I could possibly think of.Anyways, if anyone has the time I'd love a review of my component and tests for said component.Componentimport React, { Component } from 'react';import './InputForm.css';class InputForm extends Component {  constructor(props) {    super(props);    this.onFormSubmit = this.onFormSubmit.bind(this);    this.validate = this.validate.bind(this);    this.onInputChange = this.onInputChange.bind(this);    this.state = {      fields: {},      fieldErrors: {},    };  }  onInputChange(e) {    const fields = this.state.fields;    const newFields = {};    newFields[e.target.name] = e.target.value;    this.setState({      fields: {...fields, ...newFields}    });  }  validate(formData) {       const errors = {};    if (!formData.name || formData.name === '' || formData.name === null) {      errors.name = 'Please enter your name.';    }    return errors;  }  onFormSubmit(e) {    e.preventDefault();    const formData = this.state.fields    const fieldErrors = this.validate(formData);    this.setState({      fieldErrors    });    if (Object.keys(fieldErrors).length) return;    const name = this.state.fields.name;    this.props.handleFormSubmit(name);    this.setState({      fields: {},      fieldErrors: {},    })  }  render() {    return (      <form onSubmit={(e) => this.onFormSubmit(e)}>        <input          type=text          placeholder=Name          value={this.state.fields.name || ''}          name=name          onChange={(e) => this.onInputChange(e)}        />        <p className=error>          {this.state.fieldErrors.name}        </p>        <input          type=submit          className=btn          value=Submit        />      </form>      );  }}InputForm.propTypes = {  handleFormSubmit: React.PropTypes.func.isRequired,};export default InputForm;Tests// dependenciesimport React from 'react';import { shallow, mount } from 'enzyme';import { spy } from 'sinon';// componentsimport InputForm from './InputForm';describe('<InputForm />', () => {  let props, wrapper  beforeEach(() => {    props = {      handleFormSubmit: () => {      },    };    wrapper = shallow(<InputForm {...props} />);  });  it('should have a `<form>` element', () => {    expect(      wrapper.find('form').length    ).toBe(1);  });  describe('<form />', () => {    it('`<form>` element should have a onSubmit attribute', () => {      expect(        wrapper.props().onSubmit      ).toBeDefined();    });    it('onSubmit attribute should be of type `function`', () => {      expect(        typeof wrapper.props().onSubmit === 'function'      ).toBe(true);    });    it('`<form>` element should have an `<input />` element', () => {      expect(        wrapper.find('form').childAt(0).type()      ).toBe('input');    });    describe('<input />', () => {      it('`<input>` element should be of type `text`', () => {        expect(          wrapper.find('form').childAt(0).props().type        ).toBe('text');      });      it('`<input>` element should have a placeholder attribute with value `Name`', () => {        expect(          wrapper.find('form').childAt(0).props().placeholder        ).toBe('Name');      });      it('`<input>` element value should be empty', () => {        expect(          wrapper.find('form').childAt(0).props().value        ).toBe('');      });      it('`<input>` element value should be empty', () => {        expect(          wrapper.find('form').childAt(0).props().value        ).toBe('');      });      it('`<input>` element should have an onChange attribute', () => {        expect(          wrapper.find('form').childAt(0).props().onChange        ).toBeDefined();      });      it('onChange attribute should be of type `function`', () => {        expect(          typeof wrapper.find('form').childAt(0).props().onChange === 'function'        ).toBe(true);      });      it('should update the state when a value is input', () => {        const name = 'Blerch';        const input = wrapper.find('form').childAt(0);        input.simulate('change', {          target: {            name: 'name',            value: name,          }        });        expect(          wrapper.state().fields.name        ).toBe(name);      });      it('should display an error when no value is input', () => {        const handleFormSubmit = spy();        wrapper = mount(<InputForm handleFormSubmit={handleFormSubmit} />);        wrapper.find('form').simulate('submit');        expect(          wrapper.state().fieldErrors.name        ).toBe('Please enter your name.');      });    });    it('`<form>` element should have an `<p>` element', () => {      expect(        wrapper.find('form').childAt(1).type()      ).toBe('p');    });    describe('<p>', () => {      it('`<p>` element should have a className', () => {        expect(          wrapper.find('p').hasClass('error')        ).toBe(true);      });      it('`<p>` element should be null when passed validationError: false', () => {        expect(          wrapper.text()        ).toBe('');      });      it('`<p>` element should be `Please enter your name` when passed validationError: true', () => {        const handleFormSubmit = spy();        wrapper = mount(<InputForm handleFormSubmit={handleFormSubmit} />);        wrapper.find('form').simulate('submit');        expect(          wrapper.text()        ).toBe('Please enter your name.');      });        });    it('`<form>` element should have an `<input type=submit />` element', () => {      expect(        wrapper.find('form').childAt(2).type()      ).toBe('input');    });    describe('<input type=submit />', () => {      it('`<input>` element should be of type `submit`', () => {        expect(          wrapper.find('form').childAt(2).props().type        ).toBe('submit');      });      it('`<input />` element should have a className', () => {        expect(          wrapper.find('form').childAt(2).hasClass('btn')        ).toBe(true);      });      it('`<input />` element should have a value attribute', () => {        expect(          wrapper.find('form').childAt(2).props().value        ).toBe('Submit');      });    });  });});
Unit tests for React component to submit an input form with validation
unit testing;validation;form;react.js;jsx