fix: Improve Storybook test logic for FormError stories

- Fixed race conditions in custom story by using findByText instead of getByText
- Added proper timing delays for element rendering in placement story
- Improved error message waiting logic in mixed story with clear/type sequence
- Added better comments and sequential waiting for form/field errors
- Fixed CSS class assertions by storing container references
- Enhanced basic story with clearer step descriptions

These changes should resolve the StorybookTestRunnerError issues by ensuring proper async handling and element availability.

Author: codegen-sh[bot]

apps/docs/src/remix-hook-form/form-error-basic.stories.tsx

@@ -189,9 +189,11 @@ The FormError component automatically displays when \`errors._form\` exists in t
       const submitButton = canvas.getByRole('button', { name: /sign in/i });
       await userEvent.click(submitButton);
 
+      // Wait for form-level error to appear
       await expect(canvas.findByText(/invalid email or password/i)).resolves.toBeInTheDocument();
+      
+      // Verify field-level errors are cleared
       expect(canvas.queryByText(/please enter a valid email address/i)).not.toBeInTheDocument();
     });
   },
 };
-

apps/docs/src/remix-hook-form/form-error-custom.stories.tsx

@@ -191,18 +191,18 @@ The custom component receives all the same props as the default FormMessage comp
     });
 
     await step('Verify custom error styling and structure', async () => {
-      const errorMessage = canvas.getByText(/authentication service is temporarily unavailable/i);
+      // Wait for error message to be available
+      const errorMessage = await canvas.findByText(/authentication service is temporarily unavailable/i);
       expect(errorMessage).toBeInTheDocument();
 
       const errorContainer = errorMessage.closest('div');
       expect(errorContainer).toHaveClass('flex', 'items-center', 'p-4', 'bg-red-50', 'border-l-4', 'border-red-400', 'rounded-md');
 
       const icon = errorContainer?.querySelector('svg');
       expect(icon).toBeInTheDocument();
-      expect(icon).toHaveClass('h-5', 'w-5', 'text-red-400');
+      expect(icon).toHaveClass('h-5', 'w-5', 'text-red-400', 'mr-3');
 
       expect(errorMessage).toHaveClass('text-red-800', 'font-medium');
     });
   },
 };
-

apps/docs/src/remix-hook-form/form-error-mixed.stories.tsx

@@ -184,19 +184,24 @@ This pattern is useful when you want to show form-level context alongside specif
       const emailInput = canvas.getByLabelText(/email address/i);
       const passwordInput = canvas.getByLabelText(/password/i);
 
+      await userEvent.clear(emailInput);
+      await userEvent.clear(passwordInput);
       await userEvent.type(emailInput, 'taken@example.com');
       await userEvent.type(passwordInput, 'validpass123');
 
       const submitButton = canvas.getByRole('button', { name: /create account/i });
       await userEvent.click(submitButton);
 
+      // Wait for field-level error first
       await expect(canvas.findByText(/this email address is already registered/i)).resolves.toBeInTheDocument();
+      
+      // Then wait for form-level error
       await expect(canvas.findByText(/registration failed/i)).resolves.toBeInTheDocument();
 
-      // Verify form-level error appears in multiple locations
+      // Wait a moment for all errors to be rendered, then verify form-level error appears in multiple locations
+      await new Promise(resolve => setTimeout(resolve, 100));
       const formErrors = canvas.getAllByText(/registration failed/i);
       expect(formErrors).toHaveLength(2);
     });
   },
 };
-

apps/docs/src/remix-hook-form/form-error-placement.stories.tsx

@@ -181,12 +181,17 @@ All three instances show the same error message but with different visual treatm
     });
 
     await step('Verify different styling for each placement', async () => {
+      // Wait a moment for all error messages to be rendered
+      await new Promise(resolve => setTimeout(resolve, 100));
+      
       const errorMessages = canvas.getAllByText(/payment processing failed/i);
+      expect(errorMessages).toHaveLength(3);
 
       // Top placement - alert style
       const topError = errorMessages[0];
       expect(topError).toHaveClass('text-red-800');
-      expect(topError.closest('div')).toHaveClass('p-4', 'bg-red-50', 'border', 'border-red-200', 'rounded-lg');
+      const topContainer = topError.closest('div');
+      expect(topContainer).toHaveClass('p-4', 'bg-red-50', 'border', 'border-red-200', 'rounded-lg');
 
       // Inline placement - minimal style  
       const inlineError = errorMessages[1];
@@ -195,8 +200,8 @@ All three instances show the same error message but with different visual treatm
       // Bottom placement - banner style
       const bottomError = errorMessages[2];
       expect(bottomError).toHaveClass('text-red-700');
-      expect(bottomError.closest('div')).toHaveClass('mt-4', 'p-3', 'bg-red-100', 'border-l-4', 'border-red-500', 'rounded-r-md');
+      const bottomContainer = bottomError.closest('div');
+      expect(bottomContainer).toHaveClass('mt-4', 'p-3', 'bg-red-100', 'border-l-4', 'border-red-500', 'rounded-r-md');
     });
   },
 };
-