fix Field tests

Author: mj12albert

packages/react/src/field/error/FieldError.test.tsx

@@ -1,6 +1,7 @@
 import { fireEvent, screen } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { Field } from '@base-ui-components/react/field';
+import { Form } from '@base-ui-components/react/form';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Field.Error />', () => {
@@ -29,10 +30,13 @@ describe('<Field.Error />', () => {
 
   it('should show error messages by default', async () => {
     await render(
-      <Field.Root>
-        <Field.Control required />
-        <Field.Error>Message</Field.Error>
-      </Field.Root>,
+      <Form>
+        <Field.Root>
+          <Field.Control required />
+          <Field.Error>Message</Field.Error>
+        </Field.Root>
+        <button type="submit">submit</button>
+      </Form>,
     );
 
     expect(screen.queryByText('Message')).to.equal(null);
@@ -43,46 +47,58 @@ describe('<Field.Error />', () => {
     fireEvent.change(input, { target: { value: 'a' } });
     fireEvent.change(input, { target: { value: '' } });
     fireEvent.blur(input);
+    expect(screen.queryByText('Message')).to.equal(null);
 
+    fireEvent.click(screen.getByText('submit'));
     expect(screen.queryByText('Message')).not.to.equal(null);
   });
 
   describe('prop: match', () => {
     it('should only render when `match` matches constraint validation', async () => {
       await render(
-        <Field.Root>
-          <Field.Control required />
-          <Field.Error match="valueMissing">Message</Field.Error>
-        </Field.Root>,
+        <Form>
+          <Field.Root>
+            <Field.Control required minLength={2} />
+            <Field.Error match="valueMissing">Message</Field.Error>
+          </Field.Root>
+          <button type="submit">submit</button>
+        </Form>,
       );
 
       expect(screen.queryByText('Message')).to.equal(null);
 
+      fireEvent.click(screen.getByText('submit'));
+      expect(screen.queryByText('Message')).not.to.equal(null);
+
       const input = screen.getByRole<HTMLInputElement>('textbox');
 
       fireEvent.focus(input);
       fireEvent.change(input, { target: { value: 'a' } });
-      fireEvent.change(input, { target: { value: '' } });
-      fireEvent.blur(input);
+      expect(screen.queryByText('Message')).to.equal(null);
 
+      fireEvent.change(input, { target: { value: '' } });
       expect(screen.queryByText('Message')).not.to.equal(null);
     });
 
     it('should show custom errors', async () => {
       await render(
-        <Field.Root validate={() => 'error'}>
-          <Field.Control />
-          <Field.Error match="customError">Message</Field.Error>
-        </Field.Root>,
+        <Form>
+          <Field.Root validate={() => 'error'}>
+            <Field.Control />
+            <Field.Error match="customError">Message</Field.Error>
+          </Field.Root>
+          <button type="submit">submit</button>
+        </Form>,
       );
 
       const input = screen.getByRole<HTMLInputElement>('textbox');
 
       fireEvent.focus(input);
       fireEvent.change(input, { target: { value: 'a' } });
-      fireEvent.change(input, { target: { value: '' } });
       fireEvent.blur(input);
+      expect(screen.queryByText('Message')).to.equal(null);
 
+      fireEvent.click(screen.getByText('submit'));
       expect(screen.queryByText('Message')).not.to.equal(null);
     });