Mastering React Test-Driven Development

Nesting describe blocks

We can nest describe blocks to break similar tests up into logical contexts. We can invent our own convention for how to name these describe blocks. Whereas the top level is named after the form itself, the second-level describe blocks are named after the form fields.

Here's how we'd like them to end up:

describe('CustomerForm', () => {  describe('first name field', () => {    // ... tests ...  };  describe('last name field', () => {    // ... tests ...  };  describe('phone number field', () => {    // ... tests ...  };});

With this structure in place, you can simplify the it descriptive text by removing the name of the field. For example, 'renders the first name field as a text box' becomes 'renders as a text box', because it has ...