Mastering React Test-Driven Development

Extracting out a field-finder function

Both of our tests include the following line, which reaches inside the form to pull out the firstName field:

const field = form('customer').elements.firstName;

This DOM manipulation is not related to what we're testing: while we care about the value of field, we are not interested in how the DOM API works.

We can improve the readability of our tests by keeping code within tests at a high level of abstraction, and extracting lower-level logic into helper methods. Since our tests are passing at the moment, now is a great opportunity to refactor.

Extract this field variable into a new function called firstNameField, as shown:

const firstNameField = () => form('customer').elements.firstName;

In the process ...