Let's now write a set of tests for our React form. The first test that we will write will be to check that the input element has been set to the correct initial value. Again, this test is important in the life cycle of forms, since in a real-world application, we could be setting these initial values from an existing database record. Our test is as follows:

it('should render a form with default value ', () => { 
    let domNode = ReactDOM.findDOMNode(renderer) as Element; 
    let form = domNode.querySelector("form") as Element; 
    expect(form).toBeTruthy(); 
 
    let label = form.querySelector("label")!; 
    expect(label.innerHTML).toContain("Name :"); 
 
    let input = form.querySelector("input")!; 
    expect(input.value).toBe('Your Name'); 
}); 

Here, our test starts by searching for a form element within the rendered DOM, and then it checks that the form element has indeed been found. The test then finds the label for our input element, and ensures that it has been set to "Name :". Take another look, however, at the querySelector function for the label element. Note that we are using TypeScript's non-null assertion operator here (!) to mark the type that the querySelector returns. This is done to tell the compiler that we are sure that the value returned will not be null or undefined. Without this non-null assertion operator, TypeScript will generate numerous compile errors stating that the variable could possibly be null.

In an earlier chapter, when discussing the non-null assertion operator, the author argued that there should not be any cases in standard code where this operator should be used. This seems to be a good case for it, however. Let's take a look at why. Our test has an assertion directly after attempting to find the DOM element. In this case, we do not need to program defensively in order to deal with the variable if it could be null. Our test will fail if the element cannot be found, or if the element does not have the correct text in the innerHTML property. We can, therefore, indicate to the TypeScript compiler that we are OK with the element being null, since our test will fail if it is anyway. In this case, the non-null assertion operator saves us from making our tests overly complex.

Our test continues by finding the input element within the DOM, and then checks the value attribute of the input element to ensure that it is set to the value "Your Name". Remember that the HTML syntax to set an initial input element's value is as follows:

<input type="text" value="Your Name"/> 

So value is an attribute of the input element, and must be set when rendering the form to prepopulate the input element.

Let's now take a look at how to update a form value, as shown in the following test:

it('should update form value', () => { 
 
    let domNode = ReactDOM.findDOMNode(renderer) as Element; 
    let form = domNode.querySelector("form") as Element; 
    expect(form).toBeTruthy(); 
 
    let input = form.querySelector("input")!; 
    input.value = 'updatedInputValue'; 
 
    ReactTestUtils.Simulate.change(input); 
 
    expect(renderer.state.inputName).toBe('updatedInputValue'); 
 
}); 

Here, we have a test that finds the form element, and then finds the child input element. We then set the value of the input element to 'updatedInputValue' by simply setting the value property. We then call the ReactTestUtils.Simulate.change function, passing in the element that we want to update. The Simulate function will dispatch a DOM event with optional data to the control. This is how we update the DOM element, similar to Angular's detectChanges function. Once this is done, we can check the state property of our renderer variable to ensure that the inputName property has been updated correctly.

Remember that React uses the state property to both get and set values that our component is working with. Once a user has changed a value on a form, because this value is bound to a property on a React component, the state property will contain the updated value.