From 4d6f0d5091453d3d8e373365c763c1fe0e65c613 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Tue, 9 Jan 2024 20:55:01 +0000 Subject: [PATCH] Docs: Vue 3 Unit testing changes for Portable stories --- .../vue/component-test-with-testing-library.3.js.mdx | 3 ++- .../vue/component-test-with-testing-library.3.ts.mdx | 3 ++- docs/snippets/vue/multiple-stories-test.3.js.mdx | 3 ++- docs/snippets/vue/multiple-stories-test.3.ts.mdx | 3 ++- ...verride-compose-story-test.compose-stories.3.js.mdx | 3 ++- ...verride-compose-story-test.compose-stories.3.ts.mdx | 3 ++- .../override-compose-story-test.compose-story.3.js.mdx | 3 ++- .../override-compose-story-test.compose-story.3.ts.mdx | 3 ++- docs/snippets/vue/reuse-args-test.3.js.mdx | 3 ++- docs/snippets/vue/reuse-args-test.3.ts.mdx | 3 ++- docs/snippets/vue/single-story-test.3.js.mdx | 3 ++- docs/snippets/vue/single-story-test.3.ts.mdx | 3 ++- .../vue/storybook-testing-addon-optional-config.js.mdx | 3 ++- docs/writing-tests/stories-in-unit-tests.md | 10 +++++----- 14 files changed, 31 insertions(+), 18 deletions(-) diff --git a/docs/snippets/vue/component-test-with-testing-library.3.js.mdx b/docs/snippets/vue/component-test-with-testing-library.3.js.mdx index d726c9337a7d..8ef86a2a1048 100644 --- a/docs/snippets/vue/component-test-with-testing-library.3.js.mdx +++ b/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. diff --git a/docs/snippets/vue/component-test-with-testing-library.3.ts.mdx b/docs/snippets/vue/component-test-with-testing-library.3.ts.mdx index e89b5673b0c1..04fdbe73f9a5 100644 --- a/docs/snippets/vue/component-test-with-testing-library.3.ts.mdx +++ b/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. diff --git a/docs/snippets/vue/multiple-stories-test.3.js.mdx b/docs/snippets/vue/multiple-stories-test.3.js.mdx index 3d5e38c3e014..33b14cbd5f1a 100644 --- a/docs/snippets/vue/multiple-stories-test.3.js.mdx +++ b/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'; diff --git a/docs/snippets/vue/multiple-stories-test.3.ts.mdx b/docs/snippets/vue/multiple-stories-test.3.ts.mdx index 16d0b1603eb9..a4b86f00fe8e 100644 --- a/docs/snippets/vue/multiple-stories-test.3.ts.mdx +++ b/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'; diff --git a/docs/snippets/vue/override-compose-story-test.compose-stories.3.js.mdx b/docs/snippets/vue/override-compose-story-test.compose-stories.3.js.mdx index d6f7801907be..29cd7966cd54 100644 --- a/docs/snippets/vue/override-compose-story-test.compose-stories.3.js.mdx +++ b/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'; diff --git a/docs/snippets/vue/override-compose-story-test.compose-stories.3.ts.mdx b/docs/snippets/vue/override-compose-story-test.compose-stories.3.ts.mdx index d8bace872090..06f4f1bf13e1 100644 --- a/docs/snippets/vue/override-compose-story-test.compose-stories.3.ts.mdx +++ b/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'; diff --git a/docs/snippets/vue/override-compose-story-test.compose-story.3.js.mdx b/docs/snippets/vue/override-compose-story-test.compose-story.3.js.mdx index b377e1fa713e..ca76d877c03c 100644 --- a/docs/snippets/vue/override-compose-story-test.compose-story.3.js.mdx +++ b/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'; diff --git a/docs/snippets/vue/override-compose-story-test.compose-story.3.ts.mdx b/docs/snippets/vue/override-compose-story-test.compose-story.3.ts.mdx index 987e05cc7905..bca7d64cdf70 100644 --- a/docs/snippets/vue/override-compose-story-test.compose-story.3.ts.mdx +++ b/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'; diff --git a/docs/snippets/vue/reuse-args-test.3.js.mdx b/docs/snippets/vue/reuse-args-test.3.js.mdx index 359039264697..699e1d99e330 100644 --- a/docs/snippets/vue/reuse-args-test.3.js.mdx +++ b/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'; diff --git a/docs/snippets/vue/reuse-args-test.3.ts.mdx b/docs/snippets/vue/reuse-args-test.3.ts.mdx index bfc8a8f69f33..27f5e54bde7f 100644 --- a/docs/snippets/vue/reuse-args-test.3.ts.mdx +++ b/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'; diff --git a/docs/snippets/vue/single-story-test.3.js.mdx b/docs/snippets/vue/single-story-test.3.js.mdx index 5e75d53fb765..467488701396 100644 --- a/docs/snippets/vue/single-story-test.3.js.mdx +++ b/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'; diff --git a/docs/snippets/vue/single-story-test.3.ts.mdx b/docs/snippets/vue/single-story-test.3.ts.mdx index a9a03b4108aa..f60861c9b135 100644 --- a/docs/snippets/vue/single-story-test.3.ts.mdx +++ b/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'; diff --git a/docs/snippets/vue/storybook-testing-addon-optional-config.js.mdx b/docs/snippets/vue/storybook-testing-addon-optional-config.js.mdx index c2f2b12d1a5f..dea2f974b82d 100644 --- a/docs/snippets/vue/storybook-testing-addon-optional-config.js.mdx +++ b/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); ``` diff --git a/docs/writing-tests/stories-in-unit-tests.md b/docs/writing-tests/stories-in-unit-tests.md index e21c90708528..63c6689ba4ab 100644 --- a/docs/writing-tests/stories-in-unit-tests.md +++ b/docs/writing-tests/stories-in-unit-tests.md @@ -2,9 +2,9 @@ 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. @@ -12,7 +12,7 @@ Stories are a practical starting point for UI testing. Import stories into tools ## 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. -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. @@ -94,7 +94,7 @@ Update your test script to include the configuration file: -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/):