Skip to content

Commit

Permalink
remove @storybook/testing-vue3 references from docs
Browse files Browse the repository at this point in the history
  • Loading branch information
yannbf committed Jan 23, 2024
1 parent dbbf2dc commit b1a2d70
Show file tree
Hide file tree
Showing 17 changed files with 0 additions and 50 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@

import { fireEvent, render, screen } from '@testing-library/vue';

// 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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@

import { fireEvent, render, screen } from '@testing-library/vue';

// 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.
Expand Down
1 change: 0 additions & 1 deletion docs/snippets/vue/multiple-stories-test.3.js.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@

import { fireEvent, render, screen } from '@testing-library/vue';

// 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';
Expand Down
1 change: 0 additions & 1 deletion docs/snippets/vue/multiple-stories-test.3.ts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@

import { fireEvent, render, screen } from '@testing-library/vue';

// 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';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
```js
// tests/Form.test.js

// 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';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
```ts
// tests/Form.test.ts

// 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';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
```js
// tests/Form.test.js

// 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';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
```ts
// tests/Form.test.ts

// 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';
Expand Down
1 change: 0 additions & 1 deletion docs/snippets/vue/reuse-args-test.3.js.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@

import { render, screen } from '@testing-library/vue';

// 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';
Expand Down
1 change: 0 additions & 1 deletion docs/snippets/vue/reuse-args-test.3.ts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@

import { render, screen } from '@testing-library/vue';

// 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';
Expand Down
1 change: 0 additions & 1 deletion docs/snippets/vue/single-story-test.3.js.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@

import { fireEvent, render, screen } from '@testing-library/vue';

// 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';
Expand Down
1 change: 0 additions & 1 deletion docs/snippets/vue/single-story-test.3.ts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@

import { fireEvent, render, screen } from '@testing-library/vue';

// 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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
// Storybook's preview file location
import * as globalStorybookConfig from './.storybook/preview';

// Replace @storybook/vue3 with @storybook/testing-vue3 in your tests if you're using the addon
import { setProjectAnnotations } from '@storybook/vue3';

setProjectAnnotations(globalStorybookConfig);
Expand Down

This file was deleted.

This file was deleted.

This file was deleted.

28 changes: 0 additions & 28 deletions docs/writing-tests/stories-in-unit-tests.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,34 +8,6 @@ Storybook enables you to isolate a component and capture its use cases in a `*.s

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

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.

<!-- prettier-ignore-start -->

<CodeSnippets
paths={[
'vue/storybook-testing-library-install.yarn.js.mdx',
'vue/storybook-testing-library-install.npm.js.mdx',
'vue/storybook-testing-library-install.pnpm.js.mdx',
]}
/>

<!-- prettier-ignore-end -->

<Callout variant="info">

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>

</IfRenderer>

## Write a test with Testing Library

[Testing Library](https://testing-library.com/) is a suite of helper libraries for browser-based interaction tests. With [Component Story Format](../api/csf.md), your stories are reusable with Testing Library. Each named export (story) is renderable within your testing setup. For example, if you were working on a login component and wanted to test the invalid credentials scenario, here's how you could write your test:
Expand Down

0 comments on commit b1a2d70

Please sign in to comment.