diff --git a/docs/api/portable-stories-jest.md b/docs/api/portable-stories-jest.md
index 393f3d04c012..cdf194db84e4 100644
--- a/docs/api/portable-stories-jest.md
+++ b/docs/api/portable-stories-jest.md
@@ -172,7 +172,9 @@ setProjectAnnotations([previewAnnotations, addonAnnotations]);
 
 <Callout variant="warning">
 
-Sometimes a story can require an addon's [decorator](../writing-stories/decorators.md) to render properly. For example, an addon can apply a decorator that wraps your story in the necessary router context. In this case, you must include that addon's `preview` export in the project annotations set.
+Sometimes a story can require an addon's [decorator](../writing-stories/decorators.md) or [loader](../writing-stories/loaders.md) to render properly. For example, an addon can apply a decorator that wraps your story in the necessary router context. In this case, you must include that addon's `preview` export in the project annotations set. See `addonAnnotations` in the example above.
+
+Note: If the addon doesn't automatically apply the decorator or loader itself, but instead exports them for you to apply manually in `.storybook/preview.js|ts` (e.g. using `withThemeFromJSXProvider` from [@storybook/addon-themes](https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md#withthemefromjsxprovider)), then you do not need to do anything else. They are already included in the `previewAnnotations` in the example above.
 
 </Callout>
 
diff --git a/docs/api/portable-stories-playwright.md b/docs/api/portable-stories-playwright.md
index 636471fd32c4..5ee9ea4b5ddd 100644
--- a/docs/api/portable-stories-playwright.md
+++ b/docs/api/portable-stories-playwright.md
@@ -87,7 +87,9 @@ setProjectAnnotations([sbAnnotations, addonAnnotations]);
 
 <Callout variant="warning">
 
-Sometimes a story can require an addon's [decorator](../writing-stories/decorators.md) to render properly. For example, an addon can apply a decorator that wraps your story in the necessary router context. In this case, you must include that addon's `preview` export in the project annotations set.
+Sometimes a story can require an addon's [decorator](../writing-stories/decorators.md) or [loader](../writing-stories/loaders.md) to render properly. For example, an addon can apply a decorator that wraps your story in the necessary router context. In this case, you must include that addon's `preview` export in the project annotations set. See `addonAnnotations` in the example above.
+
+Note: If the addon doesn't automatically apply the decorator or loader itself, but instead exports them for you to apply manually in `.storybook/preview.js|ts` (e.g. using `withThemeFromJSXProvider` from [@storybook/addon-themes](https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md#withthemefromjsxprovider)), then you do not need to do anything else. They are already included in the `previewAnnotations` in the example above.
 
 </Callout>
 
@@ -169,12 +171,25 @@ If your stories behave differently based on [globals](../essentials/toolbars-and
 
 <!-- prettier-ignore-start -->
 
-<CodeSnippets
-  paths={[
-    'react/portable-stories-override-globals.ts.mdx',
-    'vue/portable-stories-override-globals.ts.mdx',
-  ]}
-/>
+```tsx
+// Button.portable.ts
+import { test } from 'vitest';
+import { render } from '@testing-library/react';
+import { composeStory } from '@storybook/react';
+
+import meta, { Primary } from './Button.stories';
+
+export const PrimaryEnglish = composeStory(
+  Primary,
+  meta,
+  { globals: { locale: 'en' } } // 👈 Project annotations to override the locale
+);
+
+export const PrimarySpanish =
+  composeStory(Primary, meta, { globals: { locale: 'es' } });
+```
+
+You can then use those composed stories in your Playwright test file using the [`createTest`](#createtest) function.
 
 <!-- prettier-ignore-end -->
 
diff --git a/docs/api/portable-stories-vitest.md b/docs/api/portable-stories-vitest.md
index 4dddc095568f..cdc2c199cb60 100644
--- a/docs/api/portable-stories-vitest.md
+++ b/docs/api/portable-stories-vitest.md
@@ -172,7 +172,9 @@ setProjectAnnotations([previewAnnotations, addonAnnotations]);
 
 <Callout variant="warning">
 
-Sometimes a story can require an addon's [decorator](../writing-stories/decorators.md) to render properly. For example, an addon can apply a decorator that wraps your story in the necessary router context. In this case, you must include that addon's `preview` export in the project annotations set.
+Sometimes a story can require an addon's [decorator](../writing-stories/decorators.md) or [loader](../writing-stories/loaders.md) to render properly. For example, an addon can apply a decorator that wraps your story in the necessary router context. In this case, you must include that addon's `preview` export in the project annotations set. See `addonAnnotations` in the example above.
+
+Note: If the addon doesn't automatically apply the decorator or loader itself, but instead exports them for you to apply manually in `.storybook/preview.js|ts` (e.g. using `withThemeFromJSXProvider` from [@storybook/addon-themes](https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md#withthemefromjsxprovider)), then you do not need to do anything else. They are already included in the `previewAnnotations` in the example above.
 
 </Callout>
 
diff --git a/docs/snippets/react/portable-stories-jest-compose-stories.ts.mdx b/docs/snippets/react/portable-stories-jest-compose-stories.ts.mdx
index cdec7445a0e2..3fc015a212f6 100644
--- a/docs/snippets/react/portable-stories-jest-compose-stories.ts.mdx
+++ b/docs/snippets/react/portable-stories-jest-compose-stories.ts.mdx
@@ -1,6 +1,6 @@
 ```tsx
 // Button.test.tsx
-import { test, expect } from 'jest';
+import { test, expect } from '@jest/globals';
 import { render, screen } from '@testing-library/react';
 import { composeStories } from '@storybook/react';
 
diff --git a/docs/snippets/react/portable-stories-jest-compose-story.ts.mdx b/docs/snippets/react/portable-stories-jest-compose-story.ts.mdx
index 3be3b24e7a5e..4123de0e20bd 100644
--- a/docs/snippets/react/portable-stories-jest-compose-story.ts.mdx
+++ b/docs/snippets/react/portable-stories-jest-compose-story.ts.mdx
@@ -1,6 +1,6 @@
 ```tsx
 // Button.test.tsx
-import { jest, test, expect } from 'jest';
+import { jest, test, expect } from '@jest/globals';
 import { render, screen } from '@testing-library/react';
 import { composeStory } from '@storybook/react';
 
diff --git a/docs/snippets/react/portable-stories-jest-override-globals.ts.mdx b/docs/snippets/react/portable-stories-jest-override-globals.ts.mdx
index 31a395649058..76fa7614fa8d 100644
--- a/docs/snippets/react/portable-stories-jest-override-globals.ts.mdx
+++ b/docs/snippets/react/portable-stories-jest-override-globals.ts.mdx
@@ -1,6 +1,6 @@
 ```tsx
 // Button.test.tsx
-import { test } from 'jest';
+import { test } from '@jest/globals';
 import { render } from '@testing-library/react';
 import { composeStory } from '@storybook/react';
 
@@ -10,14 +10,14 @@ test('renders in English', async () => {
   const PrimaryStory = composeStory(
     Primary,
     meta,
-    { globalTypes: { locale: 'en' } } // 👈 Project annotations to override the locale
+    { globals: { locale: 'en' } } // 👈 Project annotations to override the locale
   );
 
   render(<PrimaryStory />);
 });
 
 test('renders in Spanish', async () => {
-  const PrimaryStory = composeStory(Primary, meta, { globalTypes: { locale: 'es' } });
+  const PrimaryStory = composeStory(Primary, meta, { globals: { locale: 'es' } });
 
   render(<PrimaryStory />);
 });
diff --git a/docs/snippets/react/portable-stories-jest-with-loaders.ts.mdx b/docs/snippets/react/portable-stories-jest-with-loaders.ts.mdx
index ffd67a5a0117..3f2371ce2e4e 100644
--- a/docs/snippets/react/portable-stories-jest-with-loaders.ts.mdx
+++ b/docs/snippets/react/portable-stories-jest-with-loaders.ts.mdx
@@ -1,6 +1,6 @@
 ```tsx
 // Button.test.tsx
-import { test } from 'jest';
+import { test } from '@jest/globals';
 import { render } from '@testing-library/react';
 import { composeStory } from '@storybook/react';
 
diff --git a/docs/snippets/react/portable-stories-jest-with-play-function.ts.mdx b/docs/snippets/react/portable-stories-jest-with-play-function.ts.mdx
index 27192ac91e5c..bb76ce7bca27 100644
--- a/docs/snippets/react/portable-stories-jest-with-play-function.ts.mdx
+++ b/docs/snippets/react/portable-stories-jest-with-play-function.ts.mdx
@@ -1,6 +1,6 @@
 ```tsx
 // Button.test.tsx
-import { test } from 'vitest';
+import { test } from '@jest/globals';
 import { render } from '@testing-library/react';
 import { composeStory } from '@storybook/react';
 
diff --git a/docs/snippets/react/portable-stories-vitest-override-globals.ts.mdx b/docs/snippets/react/portable-stories-vitest-override-globals.ts.mdx
index 532509f919fe..ea9e54e5a6f4 100644
--- a/docs/snippets/react/portable-stories-vitest-override-globals.ts.mdx
+++ b/docs/snippets/react/portable-stories-vitest-override-globals.ts.mdx
@@ -10,14 +10,14 @@ test('renders in English', async () => {
   const PrimaryStory = composeStory(
     Primary,
     meta,
-    { globalTypes: { locale: 'en' } } // 👈 Project annotations to override the locale
+    { globals: { locale: 'en' } } // 👈 Project annotations to override the locale
   );
 
   render(<PrimaryStory />);
 });
 
 test('renders in Spanish', async () => {
-  const PrimaryStory = composeStory(Primary, meta, { globalTypes: { locale: 'es' } });
+  const PrimaryStory = composeStory(Primary, meta, { globals: { locale: 'es' } });
 
   render(<PrimaryStory />);
 });
diff --git a/docs/snippets/vue/portable-stories-jest-compose-stories.ts.mdx b/docs/snippets/vue/portable-stories-jest-compose-stories.ts.mdx
index 8e51f717d856..84e38865a4bc 100644
--- a/docs/snippets/vue/portable-stories-jest-compose-stories.ts.mdx
+++ b/docs/snippets/vue/portable-stories-jest-compose-stories.ts.mdx
@@ -1,6 +1,6 @@
 ```ts
 // Button.test.ts
-import { test, expect } from 'jest';
+import { test, expect } from '@jest/globals';
 import { render, screen } from '@testing-library/vue';
 import { composeStories } from '@storybook/vue3';
 
diff --git a/docs/snippets/vue/portable-stories-jest-compose-story.ts.mdx b/docs/snippets/vue/portable-stories-jest-compose-story.ts.mdx
index 2e697cf3e19c..9dbb3e409b72 100644
--- a/docs/snippets/vue/portable-stories-jest-compose-story.ts.mdx
+++ b/docs/snippets/vue/portable-stories-jest-compose-story.ts.mdx
@@ -1,6 +1,6 @@
 ```ts
 // Button.test.ts
-import { jest, test, expect } from 'jest';
+import { jest, test, expect } from '@jest/globals';
 import { render, screen } from '@testing-library/vue';
 import { composeStory } from '@storybook/vue3';
 
diff --git a/docs/snippets/vue/portable-stories-jest-override-globals.ts.mdx b/docs/snippets/vue/portable-stories-jest-override-globals.ts.mdx
index b1a5c04c1ef0..07ad6c8df0e3 100644
--- a/docs/snippets/vue/portable-stories-jest-override-globals.ts.mdx
+++ b/docs/snippets/vue/portable-stories-jest-override-globals.ts.mdx
@@ -1,6 +1,6 @@
 ```ts
 // Button.test.ts
-import { test } from 'vitest';
+import { test } from '@jest/globals';
 import { render } from '@testing-library/vue';
 import { composeStory } from '@storybook/vue3';
 
@@ -10,14 +10,14 @@ test('renders in English', async () => {
   const PrimaryStory = composeStory(
     Primary,
     meta,
-    { globalTypes: { locale: 'en' } } // 👈 Project annotations to override the locale
+    { globals: { locale: 'en' } } // 👈 Project annotations to override the locale
   );
 
   render(PrimaryStory());
 });
 
 test('renders in Spanish', async () => {
-  const PrimaryStory = composeStory(Primary, meta, { globalTypes: { locale: 'es' } });
+  const PrimaryStory = composeStory(Primary, meta, { globals: { locale: 'es' } });
 
   render(PrimaryStory());
 });
diff --git a/docs/snippets/vue/portable-stories-jest-with-loaders.ts.mdx b/docs/snippets/vue/portable-stories-jest-with-loaders.ts.mdx
index 3e03f7fa5932..8237b6ba9fe9 100644
--- a/docs/snippets/vue/portable-stories-jest-with-loaders.ts.mdx
+++ b/docs/snippets/vue/portable-stories-jest-with-loaders.ts.mdx
@@ -1,6 +1,6 @@
 ```ts
 // Button.test.ts
-import { test } from 'vitest';
+import { test } from '@jest/globals';
 import { render } from '@testing-library/vue';
 import { composeStory } from '@storybook/vue3';
 
diff --git a/docs/snippets/vue/portable-stories-jest-with-play-function.ts.mdx b/docs/snippets/vue/portable-stories-jest-with-play-function.ts.mdx
index 9840595dd590..cdfa8e4b06a6 100644
--- a/docs/snippets/vue/portable-stories-jest-with-play-function.ts.mdx
+++ b/docs/snippets/vue/portable-stories-jest-with-play-function.ts.mdx
@@ -1,6 +1,6 @@
 ```ts
 // Button.test.ts
-import { test } from 'vitest';
+import { test } from '@jest/globals';
 import { render } from '@testing-library/vue';
 import { composeStory } from '@storybook/vue3';
 
diff --git a/docs/snippets/vue/portable-stories-vitest-override-globals.ts.mdx b/docs/snippets/vue/portable-stories-vitest-override-globals.ts.mdx
index b1a5c04c1ef0..2347b2896c79 100644
--- a/docs/snippets/vue/portable-stories-vitest-override-globals.ts.mdx
+++ b/docs/snippets/vue/portable-stories-vitest-override-globals.ts.mdx
@@ -10,14 +10,14 @@ test('renders in English', async () => {
   const PrimaryStory = composeStory(
     Primary,
     meta,
-    { globalTypes: { locale: 'en' } } // 👈 Project annotations to override the locale
+    { globals: { locale: 'en' } } // 👈 Project annotations to override the locale
   );
 
   render(PrimaryStory());
 });
 
 test('renders in Spanish', async () => {
-  const PrimaryStory = composeStory(Primary, meta, { globalTypes: { locale: 'es' } });
+  const PrimaryStory = composeStory(Primary, meta, { globals: { locale: 'es' } });
 
   render(PrimaryStory());
 });