Mastering React Test-Driven Development

Providing options to a dropdown

The Git tag for this section is providing-options.

The first option in our dropdown should be an empty value. This is the value that's initially selected when the user creates a new appointment: no option is selected. Let's write that test now:

it('initially has a blank value chosen', () => {  render(<AppointmentForm />);  const firstNode = field('service').childNodes[0];  expect(firstNode.value).toEqual('');  expect(firstNode.selected).toBeTruthy();});

Make that pass by adding in an empty option into the top of the select:

export const AppointmentForm = () => (  <form id="appointment">    <select name="service">      <option />    </select>  </form>);

In the first chapter, you saw the importance of keeping test data simple. ...