Merge pull request #28768 from storybookjs/vitest-integration

Addon Vitest: Add experimental vitest integration

Author: yannbf

.circleci/config.yml

@@ -233,15 +233,15 @@ jobs:
           name: Run tests
           command: |
             cd scripts
-            yarn test --coverage --coverage.all=false
+            yarn test --coverage
       - store_test_results:
           path: scripts/junit.xml
       - report-workflow-on-failure
       - cancel-workflow-on-failure
   unit-tests:
     executor:
       class: xlarge
-      name: sb_node_22_browsers
+      name: sb_playwright
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
@@ -251,7 +251,7 @@ jobs:
           name: Test
           command: |
             cd code
-            yarn test --coverage --coverage.all=false
+            yarn test --coverage
       - store_test_results:
           path: code/junit.xml
       - persist_to_workspace:
@@ -398,6 +398,26 @@ jobs:
           template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task test-runner)
       - store_test_results:
           path: test-results
+  vitest-integration:
+    parameters:
+      parallelism:
+        type: integer
+    executor:
+      class: large
+      name: sb_playwright
+    parallelism: << parameters.parallelism >>
+    steps:
+      - git-shallow-clone/checkout_advanced:
+          clone_options: "--depth 1 --verbose"
+      - attach_workspace:
+          at: .
+      - run:
+          name: Running story tests in Vitest
+          command: yarn task --task vitest-integration --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task vitest-integration) --no-link --start-from=never --junit
+      - report-workflow-on-failure:
+          template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task vitest-integration)
+      - store_test_results:
+          path: test-results
   test-runner-dev:
     parameters:
       parallelism:
@@ -679,29 +699,33 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 13
+          parallelism: 14
           requires:
             - build
       - build-sandboxes:
-          parallelism: 13
+          parallelism: 14
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 10
+          parallelism: 11
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 8
+          parallelism: 9
           requires:
             - build-sandboxes
       - e2e-dev:
           parallelism: 2
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 8
+          parallelism: 9
           requires:
             - build-sandboxes
+      - vitest-integration:
+          parallelism: 4
+          requires:
+            - create-sandboxes
       - bench:
           parallelism: 5
           requires:
@@ -741,29 +765,33 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 19
+          parallelism: 20
           requires:
             - build
       - build-sandboxes:
-          parallelism: 19
+          parallelism: 20
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 16
+          parallelism: 17
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 14
+          parallelism: 15
           requires:
             - build-sandboxes
       - e2e-dev:
           parallelism: 2
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 14
+          parallelism: 15
           requires:
             - build-sandboxes
+      - vitest-integration:
+          parallelism: 4
+          requires:
+            - create-sandboxes
       - test-portable-stories:
           requires:
             - build
@@ -827,6 +855,10 @@ workflows:
           parallelism: 33
           requires:
             - build-sandboxes
+      - vitest-integration:
+          parallelism: 8
+          requires:
+            - create-sandboxes
       - test-portable-stories:
           requires:
             - build

.github/workflows/tests-unit.yml

@@ -24,5 +24,9 @@ jobs:
 
       - name: install and compile
         run: yarn task --task compile --start-from=auto
+
+      - name: Install Playwright Dependencies
+        run: cd code && yarn exec playwright install chromium --with-deps
+
       - name: test
         run: yarn test

MIGRATION.md

@@ -1,6 +1,7 @@
 <h1>Migration</h1>
 
 - [From version 8.2.x to 8.3.x](#from-version-82x-to-83x)
+  - [Removed `experimental_SIDEBAR_BOTTOM` and deprecated `experimental_SIDEBAR_TOP` addon types](#removed-experimental_sidebar_bottom-and-deprecated-experimental_sidebar_top-addon-types)
   - [New parameters format for addon backgrounds](#new-parameters-format-for-addon-backgrounds)
   - [New parameters format for addon viewport](#new-parameters-format-for-addon-viewport)
 - [From version 8.1.x to 8.2.x](#from-version-81x-to-82x)
@@ -104,17 +105,17 @@
     - [Tab addons cannot manually route, Tool addons can filter their visibility via tabId](#tab-addons-cannot-manually-route-tool-addons-can-filter-their-visibility-via-tabid)
     - [Removed `config` preset](#removed-config-preset-1)
 - [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
-    - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
-    - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
-    - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated)
-    - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop)
-    - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react)
+  - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
+  - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
+  - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated)
+  - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop)
+  - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react)
 - [From version 7.4.0 to 7.5.0](#from-version-740-to-750)
-    - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
-    - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers)
+  - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
+  - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers)
 - [From version 7.0.0 to 7.2.0](#from-version-700-to-720)
-    - [Addon API is more type-strict](#addon-api-is-more-type-strict)
-    - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated)
+  - [Addon API is more type-strict](#addon-api-is-more-type-strict)
+  - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated)
 - [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
   - [7.0 breaking changes](#70-breaking-changes)
     - [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below)
@@ -140,7 +141,7 @@
     - [Deploying build artifacts](#deploying-build-artifacts)
       - [Dropped support for file URLs](#dropped-support-for-file-urls)
       - [Serving with nginx](#serving-with-nginx)
-      - [Ignore story files from node\_modules](#ignore-story-files-from-node_modules)
+      - [Ignore story files from node_modules](#ignore-story-files-from-node_modules)
   - [7.0 Core changes](#70-core-changes)
     - [7.0 feature flags removed](#70-feature-flags-removed)
     - [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates)
@@ -154,7 +155,7 @@
     - [Addon-interactions: Interactions debugger is now default](#addon-interactions-interactions-debugger-is-now-default)
   - [7.0 Vite changes](#70-vite-changes)
     - [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically)
-    - [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
+    - [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
   - [7.0 Webpack changes](#70-webpack-changes)
     - [Webpack4 support discontinued](#webpack4-support-discontinued)
     - [Babel mode v7 exclusively](#babel-mode-v7-exclusively)
@@ -204,7 +205,7 @@
     - [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration)
     - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration)
     - [Autoplay in docs](#autoplay-in-docs)
-    - [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global)
+    - [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global)
   - [7.0 Deprecations and default changes](#70-deprecations-and-default-changes)
     - [storyStoreV7 enabled by default](#storystorev7-enabled-by-default)
     - [`Story` type deprecated](#story-type-deprecated)
@@ -419,6 +420,12 @@
 
 ## From version 8.2.x to 8.3.x
 
+### Removed `experimental_SIDEBAR_BOTTOM` and deprecated `experimental_SIDEBAR_TOP` addon types
+
+The experimental SIDEBAR_BOTTOM addon type was removed in favor of a built-in filter UI. The enum type definition will remain available until Storybook 9.0 but will be ignored. Similarly the experimental SIDEBAR_TOP addon type is deprecated and will be removed in a future version.
+
+These APIs allowed addons to render arbitrary content in the Storybook sidebar. Due to potential conflicts between addons and challenges regarding styling, these APIs are/will be removed. In the future, Storybook will provide declarative API hooks to allow addons to add content to the sidebar without risk of conflicts or UI inconsistencies. One such API is `experimental_updateStatus` which allow addons to set a status for stories. The SIDEBAR_BOTTOM slot is now used to allow filtering stories with a given status.
+
 ### New parameters format for addon backgrounds
 
 The `addon-backgrounds` addon now uses a new format for parameters. The `backgrounds` parameter is now an object with a `values` key that contains the background values.
@@ -448,7 +455,7 @@ Setting an override value should now be done via a `globals` property on your co
 export default {
   component: Button,
   globals: {
-    backgrounds: { value: 'twitter' },
+    backgrounds: { value: "twitter" },
   },
 };
 ```
@@ -494,7 +501,7 @@ Setting an override value should now be done via a `globals` property on your co
 export default {
   component: Button,
   globals: {
-    viewport: { value: 'phone' },
+    viewport: { value: "phone" },
   },
 };
 ```
@@ -2411,8 +2418,8 @@ export default config;
 
 #### Vite builder uses Vite config automatically
 
-When using a [Vite-based framework](#framework-field-mandatory), Storybook will automatically use your `vite.config.(ctm)js` config file starting in 7.0.  
-Some settings will be overridden by Storybook so that it can function properly, and the merged settings can be modified using `viteFinal` in `.storybook/main.js` (see the [Storybook Vite configuration docs](https://storybook.js.org/docs/react/builders/vite#configuration)).  
+When using a [Vite-based framework](#framework-field-mandatory), Storybook will automatically use your `vite.config.(ctm)js` config file starting in 7.0.
+Some settings will be overridden by Storybook so that it can function properly, and the merged settings can be modified using `viteFinal` in `.storybook/main.js` (see the [Storybook Vite configuration docs](https://storybook.js.org/docs/react/builders/vite#configuration)).
 If you were using `viteFinal` in 6.5 to simply merge in your project's standard Vite config, you can now remove it.
 
 For Svelte projects this means that the `svelteOptions` property in the `main.js` config should be omitted, as it will be loaded automatically via the project's `vite.config.js`.

code/.gitignore

@@ -1 +1,2 @@
-.nx/cache
+.nx/cache
+.vite-inspect

code/.storybook/main.ts

@@ -94,6 +94,7 @@ const config: StorybookConfig = {
     '@storybook/addon-interactions',
     '@storybook/addon-storysource',
     '@storybook/addon-designs',
+    '@storybook/experimental-addon-vitest',
     '@storybook/addon-a11y',
     '@chromatic-com/storybook',
   ],

code/.storybook/preview.tsx

@@ -1,4 +1,5 @@
-import React, { Fragment, useEffect } from 'react';
+import * as React from 'react';
+import { Fragment, useEffect } from 'react';
 
 import type { Channel } from 'storybook/internal/channels';
 import { DocsContext as DocsContextProps, useArgs } from 'storybook/internal/preview-api';
@@ -160,7 +161,7 @@ export const loaders = [
     }
     return { docsContext };
   },
-];
+] as Loader[];
 
 export const decorators = [
   // This decorator adds the DocsContext created in the loader above

code/.storybook/storybook.setup.ts

@@ -0,0 +1,38 @@
+import { beforeAll, vi, expect as vitestExpect } from 'vitest';
+
+import { setProjectAnnotations } from '@storybook/react';
+import { userEvent as storybookEvent, expect as storybookExpect } from '@storybook/test';
+
+import * as coreAnnotations from '../addons/toolbars/template/stories/preview';
+import * as componentAnnotations from '../core/template/stories/preview';
+// register global components used in many stories
+import '../renderers/react/template/components';
+import * as projectAnnotations from './preview';
+
+vi.spyOn(console, 'warn').mockImplementation((...args) => console.log(...args));
+
+const annotations = setProjectAnnotations([
+  // @ts-expect-error check type errors later
+  projectAnnotations,
+  // @ts-expect-error check type errors later
+  componentAnnotations,
+  coreAnnotations,
+  {
+    // experiment with injecting Vitest's interactivity API over our userEvent while tests run in browser mode
+    // https://vitest.dev/guide/browser/interactivity-api.html
+    loaders: async (context) => {
+      // eslint-disable-next-line no-underscore-dangle
+      if (globalThis.__vitest_browser__) {
+        const vitest = await import('@vitest/browser/context');
+        const { userEvent: browserEvent } = vitest;
+        context.userEvent = browserEvent.setup();
+        context.expect = vitestExpect;
+      } else {
+        context.userEvent = storybookEvent.setup();
+        context.expect = storybookExpect;
+      }
+    },
+  },
+]);
+
+beforeAll(annotations.beforeAll);

code/.storybook/vitest.config.ts

@@ -0,0 +1,56 @@
+import { defaultExclude, defineProject, mergeConfig } from 'vitest/config';
+
+import Inspect from 'vite-plugin-inspect';
+
+import { vitestCommonConfig } from '../vitest.workspace';
+
+const extraPlugins: any[] = [];
+if (process.env.INSPECT === 'true') {
+  // this plugin assists in inspecting the Storybook Vitest plugin's transformation and sourcemaps
+  extraPlugins.push(
+    Inspect({
+      outputDir: '../.vite-inspect',
+      build: true,
+      open: true,
+      include: ['**/*.stories.*'],
+    })
+  );
+}
+
+export default mergeConfig(
+  vitestCommonConfig,
+  defineProject({
+    plugins: [
+      import('@storybook/experimental-addon-vitest/plugin').then(({ storybookTest }) =>
+        storybookTest({
+          configDir: process.cwd(),
+        })
+      ),
+      ...extraPlugins,
+    ],
+    test: {
+      name: 'storybook-ui',
+      include: [
+        // TODO: test all core and addon stories later
+        // './core/**/components/**/*.{story,stories}.?(c|m)[jt]s?(x)',
+        '../addons/interactions/src/**/*.{story,stories}.?(c|m)[jt]s?(x)',
+      ],
+      exclude: [
+        ...defaultExclude,
+        '../node_modules/**',
+        '**/__mockdata__/**',
+        // expected to fail in Vitest because of fetching /iframe.html to cause ECONNREFUSED
+        '**/Zoom.stories.tsx',
+      ],
+      browser: {
+        enabled: true,
+        name: 'chromium',
+        provider: 'playwright',
+        headless: true,
+        screenshotFailures: false,
+      },
+      setupFiles: ['./storybook.setup.ts'],
+      environment: 'happy-dom',
+    },
+  })
+);

code/addons/a11y/package.json

@@ -61,7 +61,7 @@
   },
   "devDependencies": {
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.5",
+    "@storybook/icons": "^1.2.10",
     "@testing-library/react": "^14.0.0",
     "lodash": "^4.17.21",
     "react": "^18.2.0",