Merge pull request #28958 from storybookjs/rename-to-component-test

Docs: Rename interaction test -> component test

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.
 
 <Callout variant="info">
-  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`.
 </Callout>
 
 ### `height`

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.
 

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 */}
 

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.
 

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 */}
 

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)                            | ✅    | ✅   | ✅     | ✅     | ✅   | ✅      |

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 */}
 

docs/essentials/interactions.mdx

@@ -47,7 +47,7 @@ Now when you run Storybook, the Interactions addon will be enabled.
 
 ![Storybook Interactions installed and registered](../_assets/essentials/addon-interactions-installed-registered.png)
 
-## 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.
 

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)                         |

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.
 
 <Video src="../_assets/get-started/addons-walkthrough-optimized.mp4" />

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**
 

docs/writing-docs/index.mdx

@@ -2,7 +2,7 @@
 title: 'How to document components'
 hideRendererSelector: true
 sidebar:
-  order: 3
+  order: 4
   title: Docs
 ---
 

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:
 

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 */}
 
 <Callout variant="info" icon="💡">
-  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.
 </Callout>
 
 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.

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).
 </Callout>
 
-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