🔊 Add more debug/tracing information for flaky tests

Some CI errors are too cryptic, hopefully with this we can figure out which tests are
still failing sometimes.

.storybook/decorators.tsx

@@ -271,7 +271,7 @@ export const withFormik = (Story: StoryFn, context: StoryContext) => {
       onSubmit={(values, formikHelpers) => console.log(values, formikHelpers)}
     >
       {wrapForm ? (
-        <form>
+        <form id="storybook-withFormik-decorator-form">
           <Story />
         </form>
       ) : (

.storybook/test-runner.ts

@@ -0,0 +1,15 @@
+import {TestRunnerConfig} from '@storybook/test-runner';
+
+const config: TestRunnerConfig = {
+  preRender: async (page, context) => {
+    const {id} = context;
+    console.log(`Testing story with id: ${id}`);
+  },
+
+  postRender: async (page, context) => {
+    const {id} = context;
+    console.log(`Done testing story with id: ${id}`);
+  },
+};
+
+export default config;

src/registry/date/date-component.stories.ts

@@ -1,14 +1,12 @@
 import {expect} from '@storybook/jest';
 import {Meta, StoryObj} from '@storybook/react';
-import {userEvent, within} from '@storybook/testing-library';
+import {userEvent, waitFor, within} from '@storybook/testing-library';
 
 import ComponentEditForm from '@/components/ComponentEditForm';
-import {withFormik} from '@/sb-decorators';
 
 export default {
   title: 'Builder components/DateField',
   component: ComponentEditForm,
-  decorators: [withFormik],
   parameters: {},
   args: {
     isNew: true,
@@ -42,7 +40,9 @@ export const ValidateDeltaConstraintConfiguration: Story = {
     await step('Navigate to validation tab and open maxDate configuration', async () => {
       await userEvent.click(canvas.getByRole('link', {name: 'Validation'}));
       await userEvent.click(canvas.getByText(/Maximum date/));
-      expect(await canvas.findByText('Mode preset')).toBeVisible();
+      await waitFor(async () => {
+        expect(await canvas.findByText('Mode preset')).toBeVisible();
+      });
     });
 
     await step('Configure relative to variable', async () => {
@@ -74,7 +74,9 @@ export const ValidateDeltaConstraintConfiguration: Story = {
     });
 
     await step('Check the validation errors', async () => {
-      expect(await canvas.findByText(/The property name must only contain/)).toBeVisible();
+      await waitFor(async () => {
+        expect(await canvas.findByText(/The property name must only contain/)).toBeVisible();
+      });
       expect(await canvas.findByText('Expected integer, received float')).toBeVisible();
       expect(await canvas.findByText('Number must be greater than or equal to 0')).toBeVisible();
     });