Merge pull request #32664 from storybookjs/docs_main_config_features_add_experimentaltestsyntax

Docs: Add experimental test syntax to main config features page

Author: jonniebigodes

docs/_snippets/main-config-features-experimental-test-syntax.md

@@ -0,0 +1,12 @@
+```ts filename=".storybook/main.js|ts (CSF Next 🧪)" renderer="react" language="ts"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    experimentalTestSyntax: true,
+  },
+});
+```

docs/api/csf/csf-next.mdx

@@ -224,6 +224,27 @@ export const PrimaryDisabled = Primary.extend({
 });
 ```
 
+#### `<Story>.test`
+
+(⚠️ **Experimental**)
+
+A more ergonomic way to define [tests for your stories](../../writing-tests/index.mdx). While this API is still experimental, it is [documented in the RFC to gather feedback](https://github.com/storybookjs/storybook/discussions/30119) and must be enabled via the [`experimentalTestSyntax` feature flag](../main-config/main-config-features.mdx#experimentaltestsyntax).
+
+```ts title="Button.stories.js|ts"
+// ...from above
+export const PrimaryDisabled = Primary.extend({ args: { disabled: true } });
+
+// 👇 .test method: Attach tests to a story
+//    The test function can run the same code as the play function
+PrimaryDisabled.test('should be disabled', async ({ canvas, userEvent, args }) => {
+  const button = await canvas.findByRole('button');
+  await userEvent(button).click();
+
+  await expect(button).toBeDisabled();
+  await expect(args.onClick).not.toHaveBeenCalled();
+});
+```
+
 ## Upgrade to CSF Next
 
 You can upgrade your stories to CSF Next either automatically (from CSF 3) or manually (from CSF 1, 2, or 3). CSF Next is designed to be usable incrementally; you do not have to upgrade all of your story files at once. However, you cannot mix story formats within the same file.

docs/api/main-config/main-config-features.mdx

@@ -9,6 +9,29 @@ Parent: [main.js|ts configuration](./main-config.mdx)
 
 Type:
 
+<If renderer="react">
+
+```ts
+{
+  actions?: boolean;
+  argTypeTargetsV7?: boolean;
+  backgrounds?: boolean;
+  controls?: boolean;
+  developmentModeForBuild?: boolean;
+  experimentalTestSyntax?: boolean;
+  highlight?: boolean;
+  interactions?: boolean;
+  legacyDecoratorFileOrder?: boolean;
+  measure?: boolean;
+  outline?: boolean;
+  toolbars?: boolean;
+  viewport?: boolean;
+}
+```
+</If>
+
+<If renderer="angular">
+
 ```ts
 {
   actions?: boolean;
@@ -26,6 +49,28 @@ Type:
   viewport?: boolean;
 }
 ```
+</If>
+
+<If notRenderer={['react','angular']}>
+
+```ts
+{
+  actions?: boolean;
+  argTypeTargetsV7?: boolean;
+  backgrounds?: boolean;
+  controls?: boolean;
+  developmentModeForBuild?: boolean;
+  highlight?: boolean;
+  interactions?: boolean;
+  legacyDecoratorFileOrder?: boolean;
+  measure?: boolean;
+  outline?: boolean;
+  toolbars?: boolean;
+  viewport?: boolean;
+}
+```
+</If>
+
 
 Enables Storybook's additional features.
 
@@ -35,12 +80,16 @@ Type: `boolean`
 
 Enable the [Actions](../../essentials/actions.mdx) feature.
 
+<If renderer="angular">
+
 ## `angularFilterNonInputControls`
 
 Type: `boolean`
 
 Filter non-input controls in Angular.
 
+</If>
+
 ## `argTypeTargetsV7`
 
 (⚠️ **Experimental**)
@@ -79,6 +128,24 @@ Set `NODE_ENV` to `'development'` in built Storybooks for better testing and deb
 
 {/* prettier-ignore-end */}
 
+<If renderer="react">
+
+## `experimentalTestSyntax`
+
+(⚠️ **Experimental**)
+
+Type: `boolean`
+
+Enable the [experimental `.test` method with the CSF Next format](../csf/csf-next#storytest).
+
+{/* prettier-ignore-start */}
+
+<CodeSnippets path="main-config-features-experimental-test-syntax.md" />
+
+{/* prettier-ignore-end */}
+
+</If>
+
 ## `highlight`
 
 Type: `boolean`