Skip to content

Commit

Permalink
Merge pull request #28768 from storybookjs/vitest-integration
Browse files Browse the repository at this point in the history
Addon Vitest: Add experimental vitest integration
  • Loading branch information
yannbf authored Aug 14, 2024
2 parents 70e24c0 + 416cd00 commit bdea6d2
Show file tree
Hide file tree
Showing 161 changed files with 3,763 additions and 985 deletions.
58 changes: 45 additions & 13 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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:
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -827,6 +855,10 @@ workflows:
parallelism: 33
requires:
- build-sandboxes
- vitest-integration:
parallelism: 8
requires:
- create-sandboxes
- test-portable-stories:
requires:
- build
Expand Down
4 changes: 4 additions & 0 deletions .github/workflows/tests-unit.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
39 changes: 23 additions & 16 deletions MIGRATION.md
Original file line number Diff line number Diff line change
@@ -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)
Expand Down Expand Up @@ -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)
Expand All @@ -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)
Expand All @@ -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)
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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" },
},
};
```
Expand Down Expand Up @@ -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" },
},
};
```
Expand Down Expand Up @@ -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`.
Expand Down
3 changes: 2 additions & 1 deletion code/.gitignore
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
.nx/cache
.nx/cache
.vite-inspect
1 change: 1 addition & 0 deletions code/.storybook/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
],
Expand Down
5 changes: 3 additions & 2 deletions code/.storybook/preview.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -160,7 +161,7 @@ export const loaders = [
}
return { docsContext };
},
];
] as Loader[];

export const decorators = [
// This decorator adds the DocsContext created in the loader above
Expand Down
38 changes: 38 additions & 0 deletions code/.storybook/storybook.setup.ts
Original file line number Diff line number Diff line change
@@ -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);
56 changes: 56 additions & 0 deletions code/.storybook/vitest.config.ts
Original file line number Diff line number Diff line change
@@ -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',
},
})
);
2 changes: 1 addition & 1 deletion code/addons/a11y/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Loading

0 comments on commit bdea6d2

Please sign in to comment.