Docs: Vue 3 Unit testing changes for Portable stories

docs/snippets/vue/component-test-with-testing-library.3.js.mdx

@@ -3,7 +3,8 @@
 
 import { fireEvent, render, screen } from '@testing-library/vue';
 
-import { composeStory } from '@storybook/testing-vue3';
+// Replace @storybook/vue3 with @storybook/testing-vue3 in your tests if you're using the addon
+import { composeStory } from '@storybook/vue3';
 
 import Meta, { InvalidForm as InvalidFormStory } from './LoginForm.stories'; //👈 Our stories imported here.
 

docs/snippets/vue/component-test-with-testing-library.3.ts.mdx

@@ -3,7 +3,8 @@
 
 import { fireEvent, render, screen } from '@testing-library/vue';
 
-import { composeStory } from '@storybook/testing-vue3';
+// Replace @storybook/vue3 with @storybook/testing-vue3 in your tests if you're using the addon
+import { composeStory } from '@storybook/vue3';
 
 import Meta, { InvalidForm as InvalidFormStory } from './LoginForm.stories'; //👈 Our stories imported here.
 

docs/snippets/vue/multiple-stories-test.3.js.mdx

@@ -3,7 +3,8 @@
 
 import { fireEvent, render, screen } from '@testing-library/vue';
 
-import { composeStories } from '@storybook/testing-vue3';
+// Replace @storybook/vue3 with @storybook/testing-vue3 in your tests if you're using the addon
+import { composeStories } from '@storybook/vue3';
 
 import * as FormStories from './LoginForm.stories';
 

docs/snippets/vue/multiple-stories-test.3.ts.mdx

@@ -3,7 +3,8 @@
 
 import { fireEvent, render, screen } from '@testing-library/vue';
 
-import { composeStories } from '@storybook/testing-vue3';
+// Replace @storybook/vue3 with @storybook/testing-vue3 in your tests if you're using the addon
+import { composeStories } from '@storybook/vue3';
 
 import * as FormStories from './LoginForm.stories';
 

docs/snippets/vue/override-compose-story-test.compose-stories.3.js.mdx

@@ -1,7 +1,8 @@
 ```js
 // tests/Form.test.js
 
-import { composeStory } from '@storybook/testing-vue3';
+// Replace @storybook/vue3 with @storybook/testing-vue3 in your tests if you're using the addon
+import { composeStory } from '@storybook/vue3';
 
 import * as FormStories from './LoginForm.stories';
 

docs/snippets/vue/override-compose-story-test.compose-stories.3.ts.mdx

@@ -1,7 +1,8 @@
 ```ts
 // tests/Form.test.ts
 
-import { composeStory } from '@storybook/testing-vue3';
+// Replace @storybook/vue3 with @storybook/testing-vue3 in your tests if you're using the addon
+import { composeStory } from '@storybook/vue3';
 
 import * as FormStories from './LoginForm.stories';
 

docs/snippets/vue/override-compose-story-test.compose-story.3.js.mdx

@@ -1,7 +1,8 @@
 ```js
 // tests/Form.test.js
 
-import { composeStory } from '@storybook/testing-vue3';
+// Replace @storybook/vue3 with @storybook/testing-vue3 in your tests if you're using the addon
+import { composeStory } from '@storybook/vue3';
 
 import Meta, { ValidForm as ValidFormStory } from './LoginForm.stories';
 

docs/snippets/vue/override-compose-story-test.compose-story.3.ts.mdx

@@ -1,7 +1,8 @@
 ```ts
 // tests/Form.test.ts
 
-import { composeStory } from '@storybook/testing-vue3';
+// Replace @storybook/vue3 with @storybook/testing-vue3 in your tests if you're using the addon
+import { composeStory } from '@storybook/vue3';
 
 import Meta, { ValidForm as ValidFormStory } from './LoginForm.stories';
 

docs/snippets/vue/reuse-args-test.3.js.mdx

@@ -3,7 +3,8 @@
 
 import { render, screen } from '@testing-library/vue';
 
-import { composeStories } from '@storybook/testing-vue3';
+// Replace @storybook/vue3 with @storybook/testing-vue3 in your tests if you're using the addon
+import { composeStories } from '@storybook/vue3';
 
 import * as stories from './Button.stories';
 

docs/snippets/vue/reuse-args-test.3.ts.mdx

@@ -3,7 +3,8 @@
 
 import { render, screen } from '@testing-library/vue';
 
-import { composeStories } from '@storybook/testing-vue3';
+// Replace @storybook/vue3 with @storybook/testing-vue3 in your tests if you're using the addon
+import { composeStories } from '@storybook/vue3';
 
 import * as stories from './Button.stories';
 

docs/snippets/vue/single-story-test.3.js.mdx

@@ -3,7 +3,8 @@
 
 import { fireEvent, render, screen } from '@testing-library/vue';
 
-import { composeStory } from '@storybook/testing-vue3';
+// Replace @storybook/vue3 with @storybook/testing-vue3 in your tests if you're using the addon
+import { composeStory } from '@storybook/vue3';
 
 import Meta, { ValidForm as ValidFormStory } from './LoginForm.stories';
 

docs/snippets/vue/single-story-test.3.ts.mdx

@@ -3,7 +3,8 @@
 
 import { fireEvent, render, screen } from '@testing-library/vue';
 
-import { composeStory } from '@storybook/testing-vue3';
+// Replace @storybook/vue3 with @storybook/testing-vue3 in your tests if you're using the addon
+import { composeStory } from '@storybook/vue3';
 
 import Meta, { ValidForm as ValidFormStory } from './LoginForm.stories';
 

docs/snippets/vue/storybook-testing-addon-optional-config.js.mdx

@@ -4,7 +4,8 @@
 // Storybook's preview file location
 import * as globalStorybookConfig from './.storybook/preview';
 
-import { setProjectAnnotations } from '@storybook/testing-vue3';
+// Replace @storybook/vue3 with @storybook/testing-vue3 in your tests if you're using the addon
+import { setProjectAnnotations } from '@storybook/vue3';
 
 setProjectAnnotations(globalStorybookConfig);
 ```

docs/writing-tests/stories-in-unit-tests.md

@@ -2,17 +2,17 @@
 title: 'Unit tests'
 ---
 
-Teams test a variety of UI characteristics using different tools. Each tool requires you to replicate the same component state over and over. That’s a maintenance headache. Ideally, you’d set up your tests in the same way and reuse that across tools.
+Teams test a variety of UI characteristics using different tools. Each tool requires you to replicate the same component state over and over. That’s a maintenance headache. Ideally, you’d set up your tests similarly and reuse that across tools.
 
-Storybook enables you to isolate a component and capture its use cases in a `*.stories.js|ts` file. Stories are standard JavaScript modules cross-compatible with the whole JavaScript ecosystem.
+Storybook enables you to isolate a component and capture its use cases in a `*.stories.js|ts` file. Stories are standard JavaScript modules that are cross-compatible with the whole JavaScript ecosystem.
 
 Stories are a practical starting point for UI testing. Import stories into tools like [Jest](https://jestjs.io/), [Testing Library](https://testing-library.com/), [Vitest](https://vitest.dev/) and [Playwright](https://playwright.dev/), to save time and maintenance work.
 
 <IfRenderer renderer='vue'>
 
 ## Set up the testing addon
 
-Storybook's [`@storybook/testing-vue3`](https://storybook.js.org/addons/@storybook/testing-vue3/) addon is a powerful tool that simplifies the testing process by allowing you to reuse your stories inside alongside their associated mocks, dependencies, and context, saving time and ensuring consistency and accuracy in the testing process.
+By default, Storybook provides a set of APIs that enables you to run your stories as tests with the industry-standard testing tools, simplifying the testing process by allowing you to reuse your stories inside alongside their associated mocks, dependencies, and context. However, if you haven't upgraded to the latest stable Storybook release yet, you'll need to add the [`@storybook/testing-vue3`](https://storybook.js.org/addons/@storybook/testing-vue3/) addon to use these APIs.
 
 Run the following command to install the addon.
 
@@ -30,7 +30,7 @@ Run the following command to install the addon.
 
 <Callout variant="info">
 
-If you're using Storybook 7 or higher, the `@storybook/testing-vue3` addon is the only one we support. For Vue 2 users, refer to the [troubleshooting section](#troubleshooting) for additional guidance.
+If you're using Storybook 7 or higher, we only provide support for Vue 3 users either natively or via the addon. For Vue 2 users, refer to the [troubleshooting section](#troubleshooting) for additional guidance.
 
 </Callout>
 
@@ -94,7 +94,7 @@ Update your test script to include the configuration file:
 
 <IfRenderer renderer='vue'>
 
-Update your test configuration file (e.g., `vite.config.js|ts`) if you're using [Vitest](https://vitest.dev/), or your test script if you're using [Jest](https://jestjs.io/):
+Update your test configuration file (e.g., `vite.config.js|ts`) if you're using [Vitest](https://vitest.dev/) or your test script if you're using [Jest](https://jestjs.io/):
 
 <!-- prettier-ignore-start -->