CSF: Expose story id in composeStories

code/lib/preview-api/src/modules/store/csf/testing-utils/index.ts

@@ -88,6 +88,7 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
   composedStory.args = story.initialArgs as Partial<TArgs>;
   composedStory.play = story.playFunction as ComposedStoryPlayFn<TRenderer, Partial<TArgs>>;
   composedStory.parameters = story.parameters as Parameters;
+  composedStory.id = story.id;
 
   return composedStory;
 }

code/lib/types/src/modules/composedStory.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 
-import type { Renderer } from '@storybook/csf';
+import type { Renderer, StoryId } from '@storybook/csf';
 
 import type {
   AnnotatedStoryFn,
@@ -33,7 +33,7 @@ export type ComposedStoryPlayFn<TRenderer extends Renderer = Renderer, TArgs = A
 export type PreparedStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = AnnotatedStoryFn<
   TRenderer,
   TArgs
-> & { play: ComposedStoryPlayFn<TRenderer, TArgs>; args: TArgs };
+> & { play: ComposedStoryPlayFn<TRenderer, TArgs>; args: TArgs; id: StoryId };
 
 export type ComposedStory<TRenderer extends Renderer = Renderer, TArgs = Args> =
   | StoryFn<TRenderer, TArgs>

code/renderers/react/src/__test__/internals.test.tsx

@@ -24,6 +24,25 @@ test('returns composed parameters from story', () => {
   );
 });
 
+describe('Id of the story', () => {
+  test('is exposed correctly when composeStories is used', () => {
+    expect(CSF2StoryWithParamsAndDecorator.id).toBe(
+      'example-button--csf-2-story-with-params-and-decorator'
+    );
+  });
+  test('is exposed correctly when composeStory is used and exportsName is passed', () => {
+    const exportName = Object.entries(stories).filter(
+      ([_, story]) => story === stories.CSF3Primary
+    )[0][0];
+    const Primary = composeStory(stories.CSF3Primary, stories.default, {}, exportName);
+    expect(Primary.id).toBe('example-button--csf-3-primary');
+  });
+  test("is not unique when composeStory is used and exportsName isn't passed", () => {
+    const Primary = composeStory(stories.CSF3Primary, stories.default);
+    expect(Primary.id).toContain('unknown');
+  });
+});
+
 // common in addons that need to communicate between manager and preview
 test('should pass with decorators that need addons channel', () => {
   const PrimaryWithChannels = composeStory(stories.CSF3Primary, stories.default, {