diff --git a/docs/api/doc-blocks/doc-block-story.mdx b/docs/api/doc-blocks/doc-block-story.mdx
index 19509b523a3c..c5a8828f421f 100644
--- a/docs/api/doc-blocks/doc-block-story.mdx
+++ b/docs/api/doc-blocks/doc-block-story.mdx
@@ -79,7 +79,7 @@ Because all stories render simultaneously in docs entries, play functions can pe
However, if you know your play function is βsafeβ to run in docs, you can use this prop to run it automatically.
- If a story uses [`mount` in its play function](../../writing-tests/interaction-testing.mdx#run-code-before-the-component-gets-rendered), it will not render in docs unless `autoplay` is set to `true`.
+ If a story uses [`mount` in its play function](../../writing-tests/component-testing.mdx#run-code-before-the-component-gets-rendered), it will not render in docs unless `autoplay` is set to `true`.
### `height`
diff --git a/docs/api/portable-stories/portable-stories-jest.mdx b/docs/api/portable-stories/portable-stories-jest.mdx
index 64038d44dd7a..5734fd2385e6 100644
--- a/docs/api/portable-stories/portable-stories-jest.mdx
+++ b/docs/api/portable-stories/portable-stories-jest.mdx
@@ -168,7 +168,7 @@ sidebar:
These are the configurations needed in the setup file:
- preview annotations: those defined in `.storybook/preview.ts`
- addon annotations (optional): those exported by addons
- - beforeAll: code that runs before all tests ([more info](../../writing-tests/interaction-testing.mdx#beforeall))
+ - beforeAll: code that runs before all tests ([more info](../../writing-tests/component-testing.mdx#beforeall))
{/* prettier-ignore-start */}
@@ -222,7 +222,7 @@ sidebar:
### 3. Run
- Finally, stories can prepare data they need (e.g. setting up some mocks or fetching data) before rendering by defining [loaders](../../writing-stories/loaders.mdx), [beforeEach](../../writing-tests/interaction-testing.mdx#run-code-before-each-story) or by having all the story code in the play function when using the [mount](../../writing-tests/interaction-testing.mdx#run-code-before-the-component-gets-rendered). In portable stories, all of these steps will be executed when you call the `run` method of the composed story.
+ Finally, stories can prepare data they need (e.g. setting up some mocks or fetching data) before rendering by defining [loaders](../../writing-stories/loaders.mdx), [beforeEach](../../writing-tests/component-testing.mdx#run-code-before-each-story) or by having all the story code in the play function when using the [mount](../../writing-tests/component-testing.mdx#run-code-before-the-component-gets-rendered). In portable stories, all of these steps will be executed when you call the `run` method of the composed story.
π For this, you use the [`composeStories`](#composestories) or [`composeStory`](#composestory) API. The composed story will return a `run` method to be called.
diff --git a/docs/api/portable-stories/portable-stories-playwright.mdx b/docs/api/portable-stories/portable-stories-playwright.mdx
index 2cbae20f3dd9..e3973b4d7682 100644
--- a/docs/api/portable-stories/portable-stories-playwright.mdx
+++ b/docs/api/portable-stories/portable-stories-playwright.mdx
@@ -120,7 +120,7 @@ sidebar:
These are the configurations needed in the setup file:
- preview annotations: those defined in `.storybook/preview.ts`
- addon annotations (optional): those exported by addons
- - beforeAll: code that runs before all tests ([more info](../../writing-tests/interaction-testing.mdx#beforeall))
+ - beforeAll: code that runs before all tests ([more info](../../writing-tests/component-testing.mdx#beforeall))
{/* prettier-ignore-start */}
diff --git a/docs/api/portable-stories/portable-stories-vitest.mdx b/docs/api/portable-stories/portable-stories-vitest.mdx
index 11aa9b99475d..a764fbe28a56 100644
--- a/docs/api/portable-stories/portable-stories-vitest.mdx
+++ b/docs/api/portable-stories/portable-stories-vitest.mdx
@@ -174,7 +174,7 @@ sidebar:
These are the configurations needed in the setup file:
- preview annotations: those defined in `.storybook/preview.ts`
- addon annotations (optional): those exported by addons
- - beforeAll: code that runs before all tests ([more info](../../writing-tests/interaction-testing.mdx#beforeall))
+ - beforeAll: code that runs before all tests ([more info](../../writing-tests/component-testing.mdx#beforeall))
{/* prettier-ignore-start */}
@@ -230,7 +230,7 @@ sidebar:
### 3. Run
- Finally, stories can prepare data they need (e.g. setting up some mocks or fetching data) before rendering by defining [loaders](../../writing-stories/loaders.mdx), [beforeEach](../../writing-tests/interaction-testing.mdx#run-code-before-each-story) or by having all the story code in the play function when using the [mount](../../writing-tests/interaction-testing.mdx#run-code-before-the-component-gets-rendered). In portable stories, all of these steps will be executed when you call the `run` method of the composed story.
+ Finally, stories can prepare data they need (e.g. setting up some mocks or fetching data) before rendering by defining [loaders](../../writing-stories/loaders.mdx), [beforeEach](../../writing-tests/component-testing.mdx#run-code-before-each-story) or by having all the story code in the play function when using the [mount](../../writing-tests/component-testing.mdx#run-code-before-the-component-gets-rendered). In portable stories, all of these steps will be executed when you call the `run` method of the composed story.
π For this, you use the [`composeStories`](#composestories) or [`composeStory`](#composestory) API. The composed story will return a `run` method to be called.
diff --git a/docs/builders/vite.mdx b/docs/builders/vite.mdx
index 8c39bd909319..8f226e4f5844 100644
--- a/docs/builders/vite.mdx
+++ b/docs/builders/vite.mdx
@@ -97,9 +97,9 @@ Currently, [automatic argType inference](../api/arg-types.mdx#automatic-argtype-
{/* prettier-ignore-end */}
-### Interaction tests not working as expected
+### Component tests not working as expected
-If you are migrating from a Webpack-based project, such as [CRA](https://create-react-app.dev/), to Vite, and you have enabled Interaction testing with the [`@storybook/addon-interactions`](https://storybook.js.org/addons/@storybook/addon-interactions) addon, you may run into a situation where your tests fail to execute notifying you that the `window` object is not defined. To resolve this issue, you can create a `preview-head.html` file in your Storybook configuration directory and include the following:
+If you are migrating from a Webpack-based project, such as [CRA](https://create-react-app.dev/), to Vite, and you have enabled component testing with the [`@storybook/addon-interactions`](https://storybook.js.org/addons/@storybook/addon-interactions) addon, you may run into a situation where your tests fail to execute notifying you that the `window` object is not defined. To resolve this issue, you can create a `preview-head.html` file in your Storybook configuration directory and include the following:
{/* prettier-ignore-start */}
diff --git a/docs/configure/integration/frameworks-feature-support.mdx b/docs/configure/integration/frameworks-feature-support.mdx
index b2f88c51d1c5..aead9b265217 100644
--- a/docs/configure/integration/frameworks-feature-support.mdx
+++ b/docs/configure/integration/frameworks-feature-support.mdx
@@ -25,7 +25,7 @@ Core frameworks have dedicated maintainers or contributors who are responsible f
| [Outline](../../essentials/measure-and-outline.mdx#outline-addon) | β
| β
| β
| β
|
| **Addons** | | | | |
| [A11y](../../writing-tests/accessibility-testing.mdx) | β
| β
| β
| β
|
-| [Interactions](../../writing-tests/interaction-testing.mdx) | β
| β
| β
| β
|
+| [Component testing](../../writing-tests/component-testing.mdx) | β
| β
| β
| β
|
| [Test runner](../../writing-tests/test-runner.mdx) | β
| β
| β
| β
|
| [Test coverage](../../writing-tests/test-coverage.mdx) | β
| β
| β
| β
|
| [CSS resources](https://github.com/storybookjs/addon-cssresources) | β
| β
| β
| β
|
@@ -75,7 +75,7 @@ Community frameworks have fewer contributors which means they may not be as up t
| [Outline](../../essentials/measure-and-outline.mdx#outline-addon) | β
| β
| β
| β
| β
| β
|
| **Addons** | | | | | | |
| [A11y](../../writing-tests/accessibility-testing.mdx) | β
| β
| β
| β
| β
| β
|
-| [Interactions](../../writing-tests/interaction-testing.mdx) | | β
| β
| β
| β
| β
|
+| [Component testing](../../writing-tests/component-testing.mdx) | | β
| β
| β
| β
| β
|
| [Test runner](../../writing-tests/test-runner.mdx) | | β
| β
| β
| β
| β
|
| [Test coverage](../../writing-tests/test-coverage.mdx) | | β
| β
| β
| β
| β
|
| [CSS resources](https://github.com/storybookjs/addon-cssresources) | β
| β
| β
| β
| β
| β
|
diff --git a/docs/essentials/actions.mdx b/docs/essentials/actions.mdx
index 7c4099c18364..43033469f701 100644
--- a/docs/essentials/actions.mdx
+++ b/docs/essentials/actions.mdx
@@ -17,7 +17,7 @@ Actions work via supplying special Storybook-generated βactionβ arguments (r
### Via @storybook/test fn spy function
-The recommended way to write actions is to use the `fn` utility from `@storybook/test` to mock and spy args. This is very useful for writing [interaction tests](../writing-tests/interaction-testing.mdx). You can mock your component's methods by assigning them to the `fn()` function:
+The recommended way to write actions is to use the `fn` utility from `@storybook/test` to mock and spy args. This is very useful for writing [component tests](../writing-tests/component-testing.mdx). You can mock your component's methods by assigning them to the `fn()` function:
{/* prettier-ignore-start */}
diff --git a/docs/essentials/interactions.mdx b/docs/essentials/interactions.mdx
index 432433d7bf92..237f79c45435 100644
--- a/docs/essentials/interactions.mdx
+++ b/docs/essentials/interactions.mdx
@@ -47,7 +47,7 @@ Now when you run Storybook, the Interactions addon will be enabled.
-## Write an interaction test
+## Write a component test
Interactions run as part of the `play` function of your stories. We rely on Testing Library to do the heavy lifting.
diff --git a/docs/faq.mdx b/docs/faq.mdx
index 220228ff3be8..57c010639e1d 100644
--- a/docs/faq.mdx
+++ b/docs/faq.mdx
@@ -218,7 +218,7 @@ We're only covering versions 5.3 and 5.0 as they were important milestones for S
| | Preview and build docs | [See current documentation](./writing-docs/build-documentation.mdx) | Non existing feature or undocumented | Non existing feature or undocumented |
| Testing | Visual tests | [See current documentation](./writing-tests/visual-testing.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/automated-visual-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/automated-visual-testing) |
| | Accessibility tests | [See current documentation](./writing-tests/accessibility-testing.mdx) | Non existing feature or undocumented | Non existing feature or undocumented |
-| | Interaction tests | [See current documentation](./writing-tests/interaction-testing.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/interaction-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/interaction-testing) |
+| | Component tests | [See current documentation](./writing-tests/component-testing.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/interaction-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/interaction-testing) |
| | Snapshot tests | [See current documentation](./writing-tests/snapshot-testing/snapshot-testing.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/structural-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/structural-testing) |
| | Import stories in tests/Unit tests | [See current documentation](./writing-tests/import-stories-in-tests/stories-in-unit-tests.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/react-ui-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/react-ui-testing) |
| | Import stories in tests/End-to-end testing | [See current documentation](./writing-tests/import-stories-in-tests/stories-in-end-to-end-tests.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/react-ui-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/react-ui-testing) |
diff --git a/docs/get-started/browse-stories.mdx b/docs/get-started/browse-stories.mdx
index 1246a7070ded..1cf04a1c9be3 100644
--- a/docs/get-started/browse-stories.mdx
+++ b/docs/get-started/browse-stories.mdx
@@ -47,7 +47,7 @@ Addons are plugins that extend Storybook's core functionality. You can find them
* **Controls** allows you to interact with a componentβs args (inputs) dynamically. Experiment with alternate configurations of the component to discover edge cases.
* **Actions** help you verify interactions produce the correct outputs via callbacks. For instance, if you view the βLogged Inβ story of the `Header` component, we can verify that clicking the βLog outβ button triggers the `onLogout` callback, which would be provided by the component that made use of the Header.
-* **Interactions** provides a helpful user interface for debugging [interaction tests](../writing-tests/interaction-testing.mdx) with the `play` function.
+* **Interactions** provides a helpful user interface for debugging [component tests](../writing-tests/component-testing.mdx) with the `play` function.
* **Visual Tests** lets you pinpoint UI bugs in your local development environment by providing instant feedback directly in Storybook.
diff --git a/docs/get-started/why-storybook.mdx b/docs/get-started/why-storybook.mdx
index 02161411e3ad..e1715fee8a71 100644
--- a/docs/get-started/why-storybook.mdx
+++ b/docs/get-started/why-storybook.mdx
@@ -84,7 +84,7 @@ Isolate components and pages and track their use cases as [stories](../writing-s
**β
Test UIs with less effort and no flakes**
-Stories are a pragmatic, reproducible way of tracking UI states. Use them to spot-test the UI during development. Storybook offers built-in workflows for automated [Accessibility](../writing-tests/accessibility-testing.mdx), [Interaction](../writing-tests/interaction-testing.mdx), and [Visual](../writing-tests/visual-testing.mdx) testing. Or use stories as test cases by importing them into other JavaScript testing tools.
+Stories are a pragmatic, reproducible way of tracking UI states. Use them to spot-test the UI during development. Storybook offers built-in workflows for automated [Component](../writing-tests/component-testing.mdx), [Accessibility](../writing-tests/accessibility-testing.mdx), and [Visual](../writing-tests/visual-testing.mdx) testing. Or use stories as test cases by [importing them into other JavaScript testing tools](../writing-tests/import-stories-in-tests/stories-in-unit-tests.mdx).
**π Document UI for your team to reuse**
diff --git a/docs/writing-docs/index.mdx b/docs/writing-docs/index.mdx
index 8764a25c56fb..6f43864ccd6e 100644
--- a/docs/writing-docs/index.mdx
+++ b/docs/writing-docs/index.mdx
@@ -2,7 +2,7 @@
title: 'How to document components'
hideRendererSelector: true
sidebar:
- order: 3
+ order: 4
title: Docs
---
diff --git a/docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx b/docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx
index 85cca9ffa13b..739664dd1ba7 100644
--- a/docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx
+++ b/docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx
@@ -126,7 +126,7 @@ Here, we define `beforeEach` on a story (which will run before the story is rend
### Spying on mocked modules
-The `fn` utility also spies on the original module's functions, which you can use to assert their behavior in your tests. For example, you can use [interaction tests](../../writing-tests/interaction-testing.mdx) to verify that a function was called with specific arguments.
+The `fn` utility also spies on the original module's functions, which you can use to assert their behavior in your tests. For example, you can use [component tests](../../writing-tests/component-testing.mdx) to verify that a function was called with specific arguments.
For example, this story checks that the `saveNote` function was called when the user clicks the save button:
diff --git a/docs/writing-stories/play-function.mdx b/docs/writing-stories/play-function.mdx
index 52c242c4a7ce..eac0bcd4b84a 100644
--- a/docs/writing-stories/play-function.mdx
+++ b/docs/writing-stories/play-function.mdx
@@ -40,7 +40,7 @@ Storybook's `play` functions are small code snippets that run once the story fin
{/* prettier-ignore-end */}
- See the [Interaction testing documentation](../writing-tests/interaction-testing.mdx#api-for-user-events) for an overview of the available API events.
+ See the [component testing documentation](../writing-tests/component-testing.mdx#api-for-user-events) for an overview of the available API events.
When Storybook finishes rendering the story, it executes the steps defined within the `play` function, interacting with the component and filling the form's information. All of this without the need for user intervention. If you check your `Interactions` panel, you'll see the step-by-step flow.
diff --git a/docs/writing-tests/accessibility-testing.mdx b/docs/writing-tests/accessibility-testing.mdx
index 5942811bfb27..faa147e958c6 100644
--- a/docs/writing-tests/accessibility-testing.mdx
+++ b/docs/writing-tests/accessibility-testing.mdx
@@ -129,7 +129,7 @@ Add a new [configuration file](./test-runner.mdx#test-hook-api) inside your Stor
`preVisit` and `postVisit` are convenient hooks that allow you to extend the test runner's default configuration. Read more about them [here](./test-runner.mdx#test-hook-api).
-When you execute the test runner (for example, with `yarn test-storybook`), it will run the accessibility audit and any [interaction tests](./interaction-testing.mdx) you might have configured for each component story.
+When you execute the test runner (for example, with `yarn test-storybook`), it will run the accessibility audit and any [component tests](./component-testing.mdx) you might have configured for each component story.
It starts checking for issues by traversing the DOM tree starting from the story's root element and generates a detailed report based on the issues it encountered.
@@ -163,11 +163,11 @@ Browser-based accessibility tests, like those found in Storybook, evaluate the r
**Learn about other UI tests**
-* [Test runner](./test-runner.mdx) to automate test execution
+* [Component tests](./component-testing.mdx) for user behavior simulation
* [Visual tests](./visual-testing.mdx) for appearance
* Accessibility tests for accessibility
-* [Interaction tests](./interaction-testing.mdx) for user behavior simulation
-* [Coverage tests](./test-coverage.mdx) for measuring code coverage
* [Snapshot tests](./snapshot-testing/snapshot-testing.mdx) for rendering errors and warnings
+* [Test runner](./test-runner.mdx) to automate test execution
+* [Test coverage](./test-coverage.mdx) for measuring code coverage
* [End-to-end tests](./import-stories-in-tests/stories-in-end-to-end-tests.mdx) for simulating real user scenarios
-* [Unit tests](./import-stories-in-tests/stories-in-unit-tests.mdx) for functionality
+* [Unit tests](./import-stories-in-tests/stories-in-unit-tests.mdx) for functionality
\ No newline at end of file
diff --git a/docs/writing-tests/interaction-testing.mdx b/docs/writing-tests/component-testing.mdx
similarity index 84%
rename from docs/writing-tests/interaction-testing.mdx
rename to docs/writing-tests/component-testing.mdx
index a2ee5908316e..cda397d8de6f 100644
--- a/docs/writing-tests/interaction-testing.mdx
+++ b/docs/writing-tests/component-testing.mdx
@@ -1,11 +1,11 @@
---
-title: 'Interaction tests'
+title: 'Component tests'
sidebar:
- order: 4
- title: Interaction tests
+ order: 1
+ title: Component tests
---
-As you build more complex UIs like pages, components become responsible for more than just rendering the UI. They fetch data and manage state. Interaction tests allow you to verify these functional aspects of UIs.
+As you build more complex UIs like pages, components become responsible for more than just rendering the UI. They fetch data and manage state. Component tests allow you to verify these functional aspects of UIs.
In a nutshell, you start by supplying the appropriate props for the initial state of a component. Then simulate user behavior such as clicks and form entries. Finally, check whether the UI and component state update correctly.
@@ -15,16 +15,17 @@ In Storybook, this familiar workflow happens in your browser. That makes it easi
## How does component testing in Storybook work?
-You start by writing a [**story**](../writing-stories/index.mdx) to set up the component's initial state. Then simulate user behavior using the **play** function. Finally, use the **test-runner** to confirm that the component renders correctly and that your interaction tests with the **play** function pass. Additionally, you can automate test execution via the [command line](./test-runner.mdx#cli-options) or in your [CI environment](./test-runner.mdx#set-up-ci-to-run-tests).
+You start by writing a [**story**](../writing-stories/index.mdx) to set up the component's initial state. Then simulate user behavior using the **play** function. Finally, use the **test-runner** to confirm that the component renders correctly and that your component tests with the **play** function pass. The test runner can run via the command line or in CI.
* The [`play`](../writing-stories/play-function.mdx) function is a small snippet of code that runs after a story finishes rendering. You can use this to test user workflows.
* The test is written using Storybook-instrumented versions of [Vitest](https://vitest.dev/) and [Testing Library](https://testing-library.com/) coming from the [`@storybook/test`](https://npmjs.com/package/@storybook/test) package.
* [`@storybook/addon-interactions`](https://storybook.js.org/addons/@storybook/addon-interactions/) visualizes the test in Storybook and provides a playback interface for convenient browser-based debugging.
* [`@storybook/test-runner`](https://github.com/storybookjs/test-runner) is a standalone utilityβpowered by [Jest](https://jestjs.io/) and [Playwright](https://playwright.dev/)βthat executes all of your interactions tests and catches broken stories.
+ * The experimental [test runner with Vitest](./test-runner-with-vitest.mdx) is also available, which transforms your stories into Vitest tests and runs them in a browser.
## Set up the interactions addon
-To enable interaction testing with Storybook, you'll need to take additional steps to set it up properly. We recommend you go through the [test runner documentation](./test-runner.mdx) before proceeding with the rest of the required configuration.
+To enable the full component testing experience with Storybook, you'll need to take additional steps to set it up properly. We recommend you go through the [test runner documentation](./test-runner.mdx) before proceeding with the rest of the required configuration.
Run the following command to install the interactions addon and related dependencies.
@@ -42,9 +43,9 @@ Update your Storybook configuration (in `.storybook/main.js|ts`) to include the
{/* prettier-ignore-end */}
-## Write an interaction test
+## Write a component test
-The test itself is defined inside a `play` function connected to a story. Here's an example of how to set up an interaction test with Storybook and the `play` function:
+The test itself is defined inside a `play` function connected to a story. Here's an example of how to set up a component test with Storybook and the `play` function:
{/* prettier-ignore-start */}
@@ -198,7 +199,7 @@ Below is an abridged API for user-event. For more, check out the [official user-
### Assert tests with Vitest's APIs
-Storybookβs `@storybook/test` also provides APIs from [Vitest](https://vitest.dev/), such as [`expect`](https://vitest.dev/api/expect.html#expect) and [`vi.fn`](https://vitest.dev/api/vi.html#vi-fn). These APIs improve your testing experience, helping you assert whether a function has been called, if an element exists in the DOM, and much more. If you are used to `expect` from testing packages such as [Jest](https://jestjs.io/) or [Vitest](https://vitest.dev/), you can write interaction tests in much the same way.
+Storybookβs `@storybook/test` also provides APIs from [Vitest](https://vitest.dev/), such as [`expect`](https://vitest.dev/api/expect.html#expect) and [`vi.fn`](https://vitest.dev/api/vi.html#vi-fn). These APIs improve your testing experience, helping you assert whether a function has been called, if an element exists in the DOM, and much more. If you are used to `expect` from testing packages such as [Jest](https://jestjs.io/) or [Vitest](https://vitest.dev/), you can write component tests in much the same way.
{/* prettier-ignore-start */}
@@ -218,7 +219,7 @@ For complex flows, it can be worthwhile to group sets of related interactions to
This will show your interactions nested in a collapsible group:
-
+
### Mocked modules
@@ -244,13 +245,13 @@ The `play` function is executed after the story is rendered. If thereβs an err
Since Storybook is a webapp, anyone with the URL can reproduce the error with the same detailed information without any additional environment configuration or tooling required.
-
+
-Streamline interaction testing further by automatically [publishing Storybook](../sharing/publish-storybook.mdx) in pull requests. That gives teams a universal reference point to test and debug stories.
+Streamline component testing further by automatically [publishing Storybook](../sharing/publish-storybook.mdx) in pull requests. That gives teams a universal reference point to test and debug stories.
## Execute tests with the test-runner
-Storybook only runs the interaction test when you're viewing a story. Therefore, you'd have to go through each story to run all your checks. As your Storybook grows, it becomes unrealistic to review each change manually. Storybook [test-runner](https://github.com/storybookjs/test-runner) automates the process by running all tests for you. To execute the test-runner, open a new terminal window and run the following command:
+Storybook only runs the component test when you're viewing a story. Therefore, you'd have to go through each story to run all your checks. As your Storybook grows, it becomes unrealistic to review each change manually. Storybook [test-runner](https://github.com/storybookjs/test-runner) automates the process by running all tests for you. To execute the test-runner, open a new terminal window and run the following command:
{/* prettier-ignore-start */}
@@ -258,7 +259,7 @@ Storybook only runs the interaction test when you're viewing a story. Therefore,
{/* prettier-ignore-end */}
-
+
If you need, you can provide additional flags to the test-runner. Read the [documentation](./test-runner.mdx#cli-options) to learn more.
@@ -270,21 +271,21 @@ Once you're ready to push your code into a pull request, you'll want to automati
## Troubleshooting
-#### Whatβs the difference between interaction tests and visual tests?
+#### Whatβs the difference between component tests and visual tests?
-Interaction tests can be expensive to maintain when applied wholesale to every component. We recommend combining them with other methods like visual testing for comprehensive coverage with less maintenance work.
+Component tests can be expensive to maintain when applied wholesale to every component. We recommend combining them with other methods like visual testing for comprehensive coverage with less maintenance work.
-#### What's the difference between interaction tests and using Jest + Testing Library alone?
+#### What's the difference between component tests and using Jest + Testing Library alone?
-Interaction tests integrate Jest and Testing Library into Storybook. The biggest benefit is the ability to view the component you're testing in a real browser. That helps you debug visually, instead of getting a dump of the (fake) DOM in the command line or hitting the limitations of how JSDOM mocks browser functionality. It's also more convenient to keep stories and tests together in one file than having them spread across files.
+Component tests integrate Jest and Testing Library into Storybook. The biggest benefit is the ability to view the component you're testing in a real browser. That helps you debug visually, instead of getting a dump of the (fake) DOM in the command line or hitting the limitations of how JSDOM mocks browser functionality. It's also more convenient to keep stories and tests together in one file than having them spread across files.
**Learn about other UI tests**
-* [Test runner](./test-runner.mdx) to automate test execution
+* Component tests for user behavior simulation
* [Visual tests](./visual-testing.mdx) for appearance
* [Accessibility tests](./accessibility-testing.mdx) for accessibility
-* Interaction tests for user behavior simulation
-* [Coverage tests](./test-coverage.mdx) for measuring code coverage
* [Snapshot tests](./snapshot-testing/snapshot-testing.mdx) for rendering errors and warnings
+* [Test runner](./test-runner.mdx) to automate test execution
+* [Test coverage](./test-coverage.mdx) for measuring code coverage
* [End-to-end tests](./import-stories-in-tests/stories-in-end-to-end-tests.mdx) for simulating real user scenarios
* [Unit tests](./import-stories-in-tests/stories-in-unit-tests.mdx) for functionality
diff --git a/docs/writing-tests/import-stories-in-tests/index.mdx b/docs/writing-tests/import-stories-in-tests/index.mdx
index c845f373267b..dc51d8da2e83 100644
--- a/docs/writing-tests/import-stories-in-tests/index.mdx
+++ b/docs/writing-tests/import-stories-in-tests/index.mdx
@@ -1,6 +1,6 @@
---
title: Import stories in tests
sidebar:
- order: 7
+ order: 8
title: Import stories in tests
---
\ No newline at end of file
diff --git a/docs/writing-tests/import-stories-in-tests/stories-in-end-to-end-tests.mdx b/docs/writing-tests/import-stories-in-tests/stories-in-end-to-end-tests.mdx
index 77167db0e88a..02a931f44f0d 100644
--- a/docs/writing-tests/import-stories-in-tests/stories-in-end-to-end-tests.mdx
+++ b/docs/writing-tests/import-stories-in-tests/stories-in-end-to-end-tests.mdx
@@ -63,11 +63,11 @@ Once you execute Playwright, it opens a new browser window, loads Storybook's is
#### Learn about other UI tests
-* [Test runner](../test-runner.mdx) to automate test execution
+* [Component tests](../component-testing.mdx) for user behavior simulation
* [Visual tests](../visual-testing.mdx) for appearance
* [Accessibility tests](../accessibility-testing.mdx) for accessibility
-* [Interaction tests](../interaction-testing.mdx) for user behavior simulation
-* [Coverage tests](../test-coverage.mdx) for measuring code coverage
* [Snapshot tests](../snapshot-testing/snapshot-testing.mdx) for rendering errors and warnings
+* [Test runner](../test-runner.mdx) to automate test execution
+* [Test coverage](../test-coverage.mdx) for measuring code coverage
* End-to-end tests for simulating real user scenarios
-* [Unit tests](./stories-in-unit-tests.mdx) for functionality
+* [Unit tests](./stories-in-unit-tests.mdx) for functionality
\ No newline at end of file
diff --git a/docs/writing-tests/import-stories-in-tests/stories-in-unit-tests.mdx b/docs/writing-tests/import-stories-in-tests/stories-in-unit-tests.mdx
index 7d16abf31b5f..d975f910d500 100644
--- a/docs/writing-tests/import-stories-in-tests/stories-in-unit-tests.mdx
+++ b/docs/writing-tests/import-stories-in-tests/stories-in-unit-tests.mdx
@@ -13,7 +13,7 @@ Stories are a practical starting point for UI testing. Import stories into tools
## 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.mdx), 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:
+[Testing Library](https://testing-library.com/) is a suite of helper libraries for browser-based component tests. With [Component Story Format](../../api/csf.mdx), 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:
Storybook provides a [`composeStories`](../../api/portable-stories/portable-stories-vitest.mdx#composestories) utility that helps convert stories from a test file into renderable elements that can be reused in your Node tests with JSDOM. It also allows you to apply other Storybook features that you have enabled your project (e.g., [decorators](../../writing-stories/decorators.mdx), [args](../../writing-stories/args.mdx)) into your tests, enabling you to reuse your stories in your testing environment of choice (e.g., [Jest](https://jestjs.io/), [Vitest](https://vitest.dev/)), ensuring your tests are always in sync with your stories without having to rewrite them. This is what we refer to as portable stories in Storybook.
@@ -95,11 +95,11 @@ Storybook provides community-led addons for other frameworks like [Vue 2](https:
**Learn about other UI tests**
-* [Test runner](../test-runner.mdx) to automate test execution
+* [Component tests](../component-testing.mdx) for user behavior simulation
* [Visual tests](../visual-testing.mdx) for appearance
* [Accessibility tests](../accessibility-testing.mdx) for accessibility
-* [Interaction tests](../interaction-testing.mdx) for user behavior simulation
-* [Coverage tests](../test-coverage.mdx) for measuring code coverage
* [Snapshot tests](../snapshot-testing/snapshot-testing.mdx) for rendering errors and warnings
+* [Test runner](../test-runner.mdx) to automate test execution
+* [Test coverage](../test-coverage.mdx) for measuring code coverage
* [End-to-end tests](./stories-in-end-to-end-tests.mdx) for simulating real user scenarios
* Unit tests for functionality
diff --git a/docs/writing-tests/index.mdx b/docs/writing-tests/index.mdx
index 99fd9ae77cc1..e5f0524f7f7b 100644
--- a/docs/writing-tests/index.mdx
+++ b/docs/writing-tests/index.mdx
@@ -2,7 +2,7 @@
title: 'How to test UIs with Storybook'
hideRendererSelector: true
sidebar:
- order: 4
+ order: 3
title: Testing
---
@@ -18,11 +18,11 @@ To test a component in isolation, you often have to mock data, dependencies, or
Storybook also comes with tools, [a test runner](./test-runner.mdx), and handy integrations with the larger JavaScript ecosystem to expand your UI test coverage. These docs detail how you can use Storybook for UI testing.
-* [**Test runner**](./test-runner.mdx) to automatically test your entire Storybook and catch broken stories.
-* [**Visual tests**](./visual-testing.mdx) capture a screenshot of every story then compare it against baselines to detect appearance and integration issues
-* [**Accessibility tests**](./accessibility-testing.mdx) catch usability issues related to visual, hearing, mobility, cognitive, speech, or neurological disabilities
-* [**Interaction tests**](./interaction-testing.mdx) verify component functionality by simulating user behaviour, firing events, and ensuring that state is updated as expected
-* [**Coverage tests**](./test-coverage.mdx) to measure how much of your code is covered by your tests
-* [**Snapshot tests**](./snapshot-testing/snapshot-testing.mdx) detect changes in the rendered markup to surface rendering errors or warnings
-* [**End-to-end tests**](./import-stories-in-tests/stories-in-end-to-end-tests.mdx) for simulating real user scenarios
+* [Component tests](./component-testing.mdx) for user behavior simulation
+* [Visual tests](./visual-testing.mdx) for appearance
+* [Accessibility tests](./accessibility-testing.mdx) for accessibility
+* [Snapshot tests](./snapshot-testing/snapshot-testing.mdx) for rendering errors and warnings
+* [Test runner](./test-runner.mdx) to automate test execution
+* [Test coverage](./test-coverage.mdx) for measuring code coverage
+* [End-to-end tests](./import-stories-in-tests/stories-in-end-to-end-tests.mdx) for simulating real user scenarios
* [**Unit tests**](./import-stories-in-tests/stories-in-unit-tests.mdx) for functionality
diff --git a/docs/writing-tests/snapshot-testing/index.mdx b/docs/writing-tests/snapshot-testing/index.mdx
index 6ec310332af2..ba5956875e6a 100644
--- a/docs/writing-tests/snapshot-testing/index.mdx
+++ b/docs/writing-tests/snapshot-testing/index.mdx
@@ -1,6 +1,6 @@
---
-title: Snapshot testing
+title: Snapshot tests
sidebar:
- order: 6
- title: Snapshot testing
+ order: 4
+ title: Snapshot tests
---
\ No newline at end of file
diff --git a/docs/writing-tests/snapshot-testing/snapshot-testing.mdx b/docs/writing-tests/snapshot-testing/snapshot-testing.mdx
index bc9ca5b12225..c6ec1cc516e9 100644
--- a/docs/writing-tests/snapshot-testing/snapshot-testing.mdx
+++ b/docs/writing-tests/snapshot-testing/snapshot-testing.mdx
@@ -1,5 +1,5 @@
---
-title: 'Write snapshot tests'
+title: 'Snapshot tests'
---
Snapshot tests compare the rendered markup of every story against known baselines. Itβs a way to identify markup changes that trigger rendering errors and warnings.
@@ -14,7 +14,7 @@ Storybook is a helpful tool for snapshot testing because every story is essentia
## Automate snapshot tests with the test-runner
-Storybook test-runner turns all of your stories into executable tests. Powered by [Jest](https://jestjs.io/) and [Playwright](https://playwright.dev/). It's a standalone, framework-agnostic utility that runs parallel to your Storybook. It enables you to run multiple testing patterns in a multi-browser environment, including interaction testing with the [play function](../interaction-testing.mdx), DOM snapshot, and [accessibility testing](../accessibility-testing.mdx).
+Storybook test-runner turns all of your stories into executable tests. Powered by [Jest](https://jestjs.io/) and [Playwright](https://playwright.dev/). It's a standalone, framework-agnostic utility that runs parallel to your Storybook. It enables you to run multiple testing patterns in a multi-browser environment, including component testing with the [play function](../component-testing.mdx), DOM snapshot, and [accessibility testing](../accessibility-testing.mdx).
### Setup
@@ -130,11 +130,11 @@ Visual tests capture images of stories and compare them against image baselines.
#### Learn about other UI tests
-* [Test runner](../test-runner.mdx) to automate test execution
+* [Component tests](../component-testing.mdx) for user behavior simulation
* [Visual tests](../visual-testing.mdx) for appearance
* [Accessibility tests](../accessibility-testing.mdx) for accessibility
-* [Interaction tests](../interaction-testing.mdx) for user behavior simulation
-* [Coverage tests](../test-coverage.mdx) for measuring code coverage
* Snapshot tests for rendering errors and warnings
+* [Test runner](../test-runner.mdx) to automate test execution
+* [Test coverage](../test-coverage.mdx) for measuring code coverage
* [End-to-end tests](../import-stories-in-tests/stories-in-end-to-end-tests.mdx) for simulating real user scenarios
-* [Unit tests](../import-stories-in-tests/stories-in-unit-tests.mdx) for functionality
+* [Unit tests](../import-stories-in-tests/stories-in-unit-tests.mdx) for functionality
\ No newline at end of file
diff --git a/docs/writing-tests/snapshot-testing/storyshots-migration-guide.mdx b/docs/writing-tests/snapshot-testing/storyshots-migration-guide.mdx
index 7c4e5ec96847..692b83e94201 100644
--- a/docs/writing-tests/snapshot-testing/storyshots-migration-guide.mdx
+++ b/docs/writing-tests/snapshot-testing/storyshots-migration-guide.mdx
@@ -25,7 +25,7 @@ Before you begin the migration process, ensure that you have:
### With the test-runner
-Storybook test-runner turns all of your stories into executable tests. Powered by [Jest](https://jestjs.io/) and [Playwright](https://playwright.dev/). It's a standalone, framework-agnostic utility that runs parallel to your Storybook. It enables you to run multiple testing patterns in a multi-browser environment, including interaction testing with the [play function](../interaction-testing.mdx), DOM snapshot, and [accessibility testing](../accessibility-testing.mdx).
+Storybook test-runner turns all of your stories into executable tests. Powered by [Jest](https://jestjs.io/) and [Playwright](https://playwright.dev/). It's a standalone, framework-agnostic utility that runs parallel to your Storybook. It enables you to run multiple testing patterns in a multi-browser environment, including component testing with the [play function](../component-testing.mdx), DOM snapshot, and [accessibility testing](../accessibility-testing.mdx).
#### Setup
diff --git a/docs/writing-tests/test-coverage.mdx b/docs/writing-tests/test-coverage.mdx
index 63ae072264eb..7ac1d95f7bf1 100644
--- a/docs/writing-tests/test-coverage.mdx
+++ b/docs/writing-tests/test-coverage.mdx
@@ -1,7 +1,7 @@
---
title: 'Test coverage'
sidebar:
- order: 5
+ order: 7
title: Test coverage
---
@@ -133,11 +133,11 @@ As the [coverage addon](https://storybook.js.org/addons/@storybook/addon-coverag
**Learn about other UI tests**
-* [Test runner](./test-runner.mdx) to automate test execution
+* [Component tests](./component-testing.mdx) for user behavior simulation
* [Visual tests](./visual-testing.mdx) for appearance
* [Accessibility tests](./accessibility-testing.mdx) for accessibility
-* [Interaction tests](./interaction-testing.mdx) for user behavior simulation
-* Coverage tests for measuring code coverage
* [Snapshot tests](./snapshot-testing/snapshot-testing.mdx) for rendering errors and warnings
+* [Test runner](./test-runner.mdx) to automate test execution
+* Test coverage for measuring code coverage
* [End-to-end tests](./import-stories-in-tests/stories-in-end-to-end-tests.mdx) for simulating real user scenarios
-* [Unit tests](./import-stories-in-tests/stories-in-unit-tests.mdx) for functionality
+* [Unit tests](./import-stories-in-tests/stories-in-unit-tests.mdx) for functionality
\ No newline at end of file
diff --git a/docs/writing-tests/test-runner.mdx b/docs/writing-tests/test-runner.mdx
index 57741b141077..ac1fd7b7d3ba 100644
--- a/docs/writing-tests/test-runner.mdx
+++ b/docs/writing-tests/test-runner.mdx
@@ -1,7 +1,7 @@
---
title: 'Test runner'
sidebar:
- order: 1
+ order: 5
title: Test runner
---
@@ -150,12 +150,12 @@ You can use your CI provider (for example, [GitHub Actions](https://github.com/f
The test-runner is a generic testing tool that can run locally or on CI and be configured or extended to run all kinds of tests.
-[Chromatic](https://www.chromatic.com/?utm_source=storybook_website\&utm_medium=link\&utm_campaign=storybook) is a cloud-based service that runs [visual](./visual-testing.mdx) and [interaction tests](./interaction-testing.mdx) (and soon accessibility tests) without setting up the test runner. It also syncs with your git provider and manages access control for private projects.
+[Chromatic](https://www.chromatic.com/?utm_source=storybook_website\&utm_medium=link\&utm_campaign=storybook) is a cloud-based service that runs [visual](./visual-testing.mdx) and [component tests](./component-testing.mdx) (and soon accessibility tests) without setting up the test runner. It also syncs with your git provider and manages access control for private projects.
However, you might want to pair the test runner and Chromatic in some cases.
* Use it locally and Chromatic on your CI.
-* Use Chromatic for visual and interaction tests and run other custom tests using the test runner.
+* Use Chromatic for visual and component tests and run other custom tests using the test runner.
## Advanced configuration
@@ -368,11 +368,11 @@ This is due to the test-runner using the community-maintained package [jest-play
**Learn about other UI tests**
-* Test runner to automate test execution
+* [Component tests](./component-testing.mdx) for user behavior simulation
* [Visual tests](./visual-testing.mdx) for appearance
* [Accessibility tests](./accessibility-testing.mdx) for accessibility
-* [Interaction tests](./interaction-testing.mdx) for user behavior simulation
-* [Coverage tests](./test-coverage.mdx) for measuring code coverage
* [Snapshot tests](./snapshot-testing/snapshot-testing.mdx) for rendering errors and warnings
+* Test runner to automate test execution
+* [Test coverage](./test-coverage.mdx) for measuring code coverage
* [End-to-end tests](./import-stories-in-tests/stories-in-end-to-end-tests.mdx) for simulating real user scenarios
-* [Unit tests](./import-stories-in-tests/stories-in-unit-tests.mdx) for functionality
+* [Unit tests](./import-stories-in-tests/stories-in-unit-tests.mdx) for functionality
\ No newline at end of file
diff --git a/docs/writing-tests/visual-testing.mdx b/docs/writing-tests/visual-testing.mdx
index 33288d79a7f0..71765a828ccd 100644
--- a/docs/writing-tests/visual-testing.mdx
+++ b/docs/writing-tests/visual-testing.mdx
@@ -112,11 +112,11 @@ Visual tests compare the rendered pixels of every story against known baselines.
**Learn about other UI tests**
-* [Test runner](./test-runner.mdx) to automate test execution
+* [Component tests](./component-testing.mdx) for user behavior simulation
* Visual tests for appearance
* [Accessibility tests](./accessibility-testing.mdx) for accessibility
-* [Interaction tests](./interaction-testing.mdx) for user behavior simulation
-* [Coverage tests](./test-coverage.mdx) for measuring code coverage
* [Snapshot tests](./snapshot-testing/snapshot-testing.mdx) for rendering errors and warnings
+* [Test runner](./test-runner.mdx) to automate test execution
+* [Test coverage](./test-coverage.mdx) for measuring code coverage
* [End-to-end tests](./import-stories-in-tests/stories-in-end-to-end-tests.mdx) for simulating real user scenarios
-* [Unit tests](./import-stories-in-tests/stories-in-unit-tests.mdx) for functionality
+* [Unit tests](./import-stories-in-tests/stories-in-unit-tests.mdx) for functionality
\ No newline at end of file