Our final set of tests for React forms will be to submit the form itself. Remember that we have declared a function that will be called when the form is submitted, as follows:

<form onSubmit={this.onSubmit} > 

Here, our React component has specified that the onSubmit function should be called when the form itself is submitted. This function can then be used to convert the form's values into a JSON structure for submitting to a REST endpoint. While we will not show how to interact with a REST endpoint here, the important step for our tests is to ensure that the onSubmit function is called.

Using the React testing framework, there are actually two ways that we can simulate a form submission event. Let's take a look at the first, as follows:

    it('should trigger onSubmit when form is submitted', () => { 
 
        let spy = spyOn(ItemCollectionView.prototype, 'onSubmit'); 
 
        let testRenderer = ReactTestUtils.renderIntoDocument( 
            <ItemCollectionView items={ClickableItemArray} /> 
        ) as any; 
 
        let formForSubmit = 
            ReactTestUtils.findRenderedDOMComponentWithTag
                (testRenderer, 'form'); 
        ReactTestUtils.Simulate.submit(formForSubmit); 
 
        expect(spy).toHaveBeenCalled(); 
    }); 

Here, we have a test that starts by creating a spy for the onSubmit function of our React component. Again, we need to create this spy before the component is rendered to the DOM, so we attach the spy to the definition of the ItemCollectionView class by using the ItemCollectionView.prototype property. We then create a testRenderer variable, and call the ReactTestUtils.renderIntoDocument function to create the ItemCollectionView component, and render it into the DOM.

We then use the ReactTestUtils.findRenderedDOMComponentWithTag function to find the instance of our form. This function is similar to our previous DOM search functions. Once we have a handle to the form, we can call the ReactTestUtils.Simulate.submit function to submit the form. Our test then checks that the spy has been called, or, in other words, that the onSubmit function has been called on our component.

Note that while the ReactTestUtils.Simulate.submit function will submit the form for us, there is another way to trigger the form submission. Our form also has a button named "Submit", which has been rendered as follows:

<button className="submit-button" type="submit" 
    value="Submit">Submit</button> 

This button is of the "submit" type, and clicking on it will therefore trigger the form submission. This means that a more accurate test for form submission would be to trigger a click event on this button, and ensure that the form is submitted correctly. Our test for this is as follows:

    it('should trigger onSubmit when button is clicked', () => { 
        let spy = spyOn(ItemCollectionView.prototype, 'onSubmit'); 
 
        let testRenderer = ReactTestUtils.renderIntoDocument( 
            <ItemCollectionView items={ClickableItemArray} /> 
        ) as any; 
 
        let button =  
           ReactTestUtils.scryRenderedDOMComponentsWithTag
                (testRenderer, 'button'); 
        ReactTestUtils.Simulate.submit(button[3]); 
 
        console.log(`after calling submit form`); 
        expect(spy).toHaveBeenCalled(); 
 
    }); 

Our test starts by creating a spy and rendering the React component to the DOM as usual. Note, however, that we are using another React testing function named scryRenderedDOMComponentsWithTag. This function will return all elements that it finds within the DOM that match the tag name. We are searching for elements of the button type, and therefore will actually find four elements within our component. The first three buttons are rendered as selectable items, and the fourth button is our form Submit button. Our test, therefore, calls the ReactTestUtils.Simulate.submit function with the fourth button in order to submit the form. We then expect that the spy has been called, which means that the onSubmit function on our component has been triggered on form submission.