Docs: Add componentName to getAllStoryFiles in Jest portable stories guide

[AliMahmoudDev]

Issue

Fixes #26925

Problem

In the Jest migration guide for portable stories, the getAllStoryFiles() function returns { filePath, storyFile } but the consumer code destructures componentName:

getAllStoryFiles().forEach(({ storyFile, componentName }) => {
    const meta = storyFile.default;
    const title = meta.title || componentName;

Since componentName was never defined in the returned object, it was always undefined, causing title to fallback to undefined when meta.title wasn't set.

The Vitest version of the same guide correctly computes and returns componentName:

const componentName = path.basename(filePath).replace(/\.(stories|story)\.[^/.]+$/, \$/\);
return { filePath, storyFile, componentName, storyDir };

What Changed

File: docs/_snippets/portable-stories-jest-snapshot-test.md

Added componentName computation to both the JavaScript and TypeScript versions of getAllStoryFiles() in the Jest portable stories snapshot test snippet:

   return storyFiles.map((filePath) => {
     const storyFile = require(filePath);
+    const componentName = path.basename(filePath).replace(/\.(stories|story)\.[^/.]+$/, \$/\);
-    return { filePath, storyFile };
+    return { filePath, storyFile, componentName };
   });

This aligns the Jest code sample with the Vitest version and fixes the runtime error where componentName would be undefined.

How to test

Manual testing

Copy the updated Jest code sample from the docs and verify that:

1. componentName is correctly extracted from the filename (e.g., Button.stories.tsx → Button)
2. It is used as a proper fallback for meta.title in the test suite description

Type of change

• Documentation fix (non-breaking)

Summary by CodeRabbit

• Documentation
  • Enhanced Jest snapshot test snippets for Storybook with improved component name resolution for more flexible testing scenarios.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ffb1da48-093d-43da-86f0-84a53f39e459

📥 Commits

Reviewing files that changed from the base of the PR and between c91f986 and aa7de52.

📒 Files selected for processing (1)

• docs/_snippets/portable-stories-jest-snapshot-test.md

---

📝 Walkthrough

Walkthrough

The PR updates the Storybook Jest snapshot test documentation snippets to compute componentName from story file basenames. Both JavaScript and TypeScript code examples in the portable-stories guide now derive and return componentName alongside filePath and storyFile, enabling test fallback behavior when story titles are not explicitly defined.

Changes

Jest Snapshot Test Snippet Updates

Layer / File(s)	Summary
Add componentName to getAllStoryFiles docs/_snippets/portable-stories-jest-snapshot-test.md	Both JavaScript (lines 28–29) and TypeScript (lines 117–118) code snippets for getAllStoryFiles now derive componentName from the story file's basename using path.parse() and return it as part of the object alongside filePath and storyFile.

---

🎯 1 (Trivial) | ⏱️ ~3 minutes

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Sidnioulz]

@Sidnioulz the Chinese comment was from an earlier draft and has been removed. sorry about that

@AliMahmoudDev, Can you please list all of your GitHub account handles?