step3 - Adds one more field to the SimpleForm

src/components/SimpleForm.jsx

@@ -16,6 +16,12 @@ const SimpleForm = () => {
           value: /^\w{3,50}$/,
           message: 'invalid name'
         }
+      },
+      birthDate: {
+        pattern: {
+          value: /^\d{2}\/\d{2}\/\d{4}$/,
+          message: 'invalid date format (dd/mm/yyyy)'
+        }
       }
     }
   });
@@ -27,6 +33,17 @@ const SimpleForm = () => {
         <input type="text" name="name" id="name" {...bindField('name')} />
         {errors.name && <p>{errors.name}</p>}
       </div>
+
+      <div>
+        <label htmlFor="birthDate">birth date</label>
+        <input
+          type="text"
+          name="birthDate"
+          id="birthDate"
+          {...bindField('birthDate')}
+        />
+        {errors.birthDate && <p>{errors.birthDate}</p>}
+      </div>
     </form>
   );
 };

src/components/SimpleForm.spec.jsx

@@ -18,14 +18,33 @@ describe('<SimpleForm />', () => {
 
     const nameInput = getByLabelText('name');
 
+    // fires a change event in the input with value 'ab'
     fireEvent.change(nameInput, {
       target: { value: 'ab' }
     });
 
+    // expects the input to have the value 'ab'
     expect(nameInput).toHaveValue('ab');
 
+    // looks up on the DOM an element with the 'invalid name' text
     const error = await findByText('invalid name');
 
+    // expects the element to exits
+    expect(error).toBeInTheDocument();
+  });
+
+  it('should render an erro message for the birthDate field', async () => {
+    const { getByLabelText, findByText } = render(<SimpleForm />);
+    const input = getByLabelText('birth date');
+
+    fireEvent.change(input, {
+      target: { value: '11' }
+    });
+
+    expect(input).toHaveValue('11');
+
+    const error = await findByText('invalid date format (dd/mm/yyyy)');
+
     expect(error).toBeInTheDocument();
   });
 });