fix types and tests

code/core/src/core-server/utils/save-story/mocks/csf4-variances.stories.tsx

@@ -1,3 +1,4 @@
+// @ts-expect-error this is just a mock file
 import { config } from '#.storybook/preview';
 
 const meta = config.meta({

code/renderers/react/src/__test__/Button.csf4.stories.tsx

@@ -17,7 +17,9 @@ const meta = config.meta({
   argTypes: {
     backgroundColor: { control: 'color' },
   },
-  args: {},
+  args: {
+    children: 'Children coming from meta args',
+  },
 });
 
 export const CSF2Secondary = meta.story({
@@ -61,7 +63,7 @@ export const CSF2StoryWithLocale = meta.story({
 });
 
 export const CSF2StoryWithParamsAndDecorator = meta.story({
-  render: (args: any) => {
+  render: (args) => {
     return <Button {...args} />;
   },
   args: {
@@ -87,7 +89,7 @@ export const CSF3Button = meta.story({
 
 export const CSF3ButtonWithRender = meta.story({
   ...CSF3Button,
-  render: (args: any) => (
+  render: (args) => (
     <div>
       <p data-testid="custom-render">I am a custom render function</p>
       <Button {...args} />
@@ -139,6 +141,7 @@ export const CSF3InputFieldFilled = meta.story({
 const mockFn = fn();
 export const LoaderStory = meta.story({
   args: {
+    // @ts-expect-error TODO: add a way to provide custom args/argTypes
     mockFn,
   },
   loaders: [
@@ -165,13 +168,16 @@ export const LoaderStory = meta.story({
 
 export const MountInPlayFunction = meta.story({
   args: {
+    // @ts-expect-error TODO: add a way to provide custom args/argTypes
     mockFn: fn(),
   },
-  play: async ({ args, mount, context }: any) => {
+  play: async ({ args, mount, context }) => {
     // equivalent of loaders
     const loadedData = await Promise.resolve('loaded data');
+    // @ts-expect-error TODO: add a way to provide custom args/argTypes
     mocked(args.mockFn).mockReturnValueOnce('mockFn return value');
     // equivalent of render
+    // @ts-expect-error TODO: add a way to provide custom args/argTypes
     const data = args.mockFn('render');
     // TODO refactor this in the mount args PR
     context.originalStoryFn = () => (
@@ -183,6 +189,7 @@ export const MountInPlayFunction = meta.story({
     await mount();
 
     // equivalent of play
+    // @ts-expect-error TODO: add a way to provide custom args/argTypes
     expect(args.mockFn).toHaveBeenCalledWith('render');
   },
 });
@@ -195,13 +202,16 @@ export const MountInPlayFunctionThrow = meta.story({
 
 export const WithActionArg = meta.story({
   args: {
+    // @ts-expect-error TODO: add a way to provide custom args/argTypes
     someActionArg: action('some-action-arg'),
   },
-  render: (args: any) => {
+  render: (args) => {
+    // @ts-expect-error TODO: add a way to provide custom args/argTypes
     args.someActionArg('in render');
     return (
       <button
         onClick={() => {
+          // @ts-expect-error TODO: add a way to provide custom args/argTypes
           args.someActionArg('on click');
         }}
       />
@@ -216,6 +226,7 @@ export const WithActionArg = meta.story({
 
 export const WithActionArgType = meta.story({
   argTypes: {
+    // @ts-expect-error TODO: add a way to provide custom args/argTypes
     someActionArg: {
       action: true,
     },

code/renderers/react/src/__test__/__snapshots__/portable-stories-factory.test.tsx.snap

@@ -51,7 +51,9 @@ exports[`Renders CSF3ButtonWithRender story 1`] = `
       <button
         class="storybook-button storybook-button--medium storybook-button--secondary"
         type="button"
-      />
+      >
+        Children coming from meta args
+      </button>
     </div>
   </div>
 </body>

code/renderers/react/src/__test__/portable-stories-factory.test.tsx

@@ -28,8 +28,9 @@ const HooksStory = composeStory(
 const projectAnnotations = setProjectAnnotations([]);
 
 // example with composeStories, returns an object with all stories composed with args/decorators
-const { CSF3Primary, LoaderStory, MountInPlayFunction, MountInPlayFunctionThrow } =
+// @ts-expect-error TODO: add a way to provide custom args/argTypes
-  composeStories(ButtonStories);
+// eslint-disable-next-line prettier/prettier
+const { CSF3Primary, LoaderStory, MountInPlayFunction, MountInPlayFunctionThrow } = composeStories(ButtonStories);
 const { ThrowsError } = composeStories(ComponentWithErrorStories);
 
 beforeAll(async () => {
@@ -83,8 +84,8 @@ describe('renders', () => {
     expect(screen.getByTestId('loaded-data').textContent).toEqual('loaded data');
   });
 
-  it('should throw an error in play function', () => {
+  it('should throw an error in play function', async () => {
-    expect(() => MountInPlayFunctionThrow.run()).rejects.toThrowError('Error thrown in play');
+    await expect(() => MountInPlayFunctionThrow.run()).rejects.toThrowError('Error thrown in play');
   });
 
   it('should call and compose loaders data', async () => {
@@ -136,6 +137,8 @@ describe('projectAnnotations', () => {
       ButtonStories.CSF3Primary.meta.annotations,
       addonActionsPreview as ProjectAnnotations<ReactRenderer>
     );
+
+    // @ts-expect-error TODO: add a way to provide custom args/argTypes
     expect(Story.args.someActionArg).toHaveProperty('isAction', true);
   });
 });
@@ -189,7 +192,9 @@ describe('CSF3', () => {
       const input = screen.getByTestId('input') as HTMLInputElement;
       expect(input.value).toEqual('Hello world!');
     } finally {
-      document.body.removeChild(divElement);
+      if (divElement) {
+        document.body.removeChild(divElement);
+      }
     }
   });
 
@@ -237,7 +242,9 @@ describe('ComposeStories types', () => {
   });
 });
 
+// @ts-expect-error TODO: fix the types for this
 const testCases = Object.values(composeStories(ButtonStories)).map(
+  // @ts-expect-error TODO: fix the types for this
   (Story) => [Story.storyName, Story] as [string, typeof Story]
 );
 it.each(testCases)('Renders %s story', async (_storyName, Story) => {
@@ -245,6 +252,7 @@ it.each(testCases)('Renders %s story', async (_storyName, Story) => {
     return;
   }
 
+  // @ts-expect-error TODO: fix the types for this
   await Story.run();
   expect(document.body).toMatchSnapshot();
 });