Mastering React Test-Driven Development

Accepting text input

The Git tag for this section is accepting-text-input.

Let's render an HTML text input field onto the page. Add the following test to test/CustomerForm.test.js:

it('renders the first name field as a text box', () => {  render(<CustomerForm />);  const field = form('customer').elements.firstName;  expect(field).not.toBeNull();  expect(field.tagName).toEqual('INPUT');  expect(field.type).toEqual('text');});

This test makes use of the DOM form API: any form allows access to all of its input elements using the elements indexer. This is a simpler way of accessing form fields than CSS selectors, so I prefer to use it when it's an option.

There are three expectations in this test:

• For there to be a form element with the name firstName ...