Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: Fixes found during 8.5 QA #30103

Open
wants to merge 2 commits into
base: next
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 0 additions & 31 deletions docs/_snippets/vitest-plugin-vitest-config-alias.md

This file was deleted.

6 changes: 6 additions & 0 deletions docs/_snippets/vitest-plugin-vitest-config.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ export default mergeConfig(
defineConfig({
plugins: [
storybookTest({
// The location of your Storybook config, main.js|ts
configDir: './.storybook',
// This should match your package.json script to run Storybook
// The --ci flag will skip prompts and not open a browser
storybookScript: 'yarn storybook --ci',
Expand Down Expand Up @@ -44,6 +46,8 @@ export default mergeConfig(
defineConfig({
plugins: [
storybookTest({
// The location of your Storybook config, main.js|ts
configDir: './.storybook',
// This should match your package.json script to run Storybook
// The --ci flag will skip prompts and not open a browser
storybookScript: 'yarn storybook --ci',
Expand Down Expand Up @@ -78,6 +82,8 @@ export default mergeConfig(
defineConfig({
plugins: [
storybookTest({
// The location of your Storybook config, main.js|ts
configDir: './.storybook',
// This should match your package.json script to run Storybook
// The --ci flag will skip prompts and not open a browser
storybookScript: 'yarn storybook --ci',
Expand Down
6 changes: 6 additions & 0 deletions docs/_snippets/vitest-plugin-vitest-workspace.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ export default defineWorkspace([
extends: './vite.config.ts',
plugins: [
storybookTest({
// The location of your Storybook config, main.js|ts
configDir: './.storybook',
// This should match your package.json script to run Storybook
// The --ci flag will skip prompts and not open a browser
storybookScript: 'yarn storybook --ci',
Expand Down Expand Up @@ -49,6 +51,8 @@ export default defineWorkspace([
extends: './vite.config.ts',
plugins: [
storybookTest({
// The location of your Storybook config, main.js|ts
configDir: './.storybook',
// This should match your package.json script to run Storybook
// The --ci flag will skip prompts and not open a browser
storybookScript: 'yarn storybook --ci',
Expand Down Expand Up @@ -87,6 +91,8 @@ export default defineWorkspace([
extends: './vite.config.ts',
plugins: [
storybookTest({
// The location of your Storybook config, main.js|ts
configDir: './.storybook',
// This should match your package.json script to run Storybook
// The --ci flag will skip prompts and not open a browser
storybookScript: 'yarn storybook --ci',
Expand Down
25 changes: 12 additions & 13 deletions docs/writing-tests/test-addon.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,9 @@ Some Storybook frameworks require additional setup to enable the framework's fea
viteConfig,
defineConfig({
plugins: [
storybookTest(),
storybookTest({
// ...
}),
kylegach marked this conversation as resolved.
Show resolved Hide resolved
storybookNextJsPlugin(), // 👈 Apply the framework plugin here
],
// ...
Expand All @@ -119,7 +121,9 @@ Some Storybook frameworks require additional setup to enable the framework's fea
viteConfig,
defineConfig({
plugins: [
storybookTest(),
storybookTest({
// ...
}),
storybookVuePlugin(), // 👈 Apply the framework plugin here
],
// ...
Expand All @@ -142,7 +146,9 @@ Some Storybook frameworks require additional setup to enable the framework's fea
viteConfig,
defineConfig({
plugins: [
storybookTest(),
storybookTest({
// ...
}),
storybookSveltekitPlugin(), // 👈 Apply the framework plugin here
],
// ...
Expand Down Expand Up @@ -313,6 +319,7 @@ export default defineWorkspace([
{
plugins: [
storybookTest({
// ...
storybookScript: 'yarn storybook --ci',
storybookUrl: process.env.SB_URL
}),
Expand Down Expand Up @@ -427,17 +434,9 @@ If your stories use assets in the public directory and you're not using the defa

### How do I apply custom Vite configuration?

If you have custom operations defined in [`viteFinal`](../api/main-config/main-config-vite-final.mdx) in your `.storybook/main.js|ts` file, you will need to translate those into the Vitest configuration. This is because the plugin does not use the Storybook Vite configuration.

For example, to recreate an alias in Storybook's Vite configuration, you would need to apply that alias in the Vitest configuration:

{/* prettier-ignore-start */}

<CodeSnippets path="vitest-plugin-vitest-config-alias.md" />

{/* prettier-ignore-end */}
Your Storybook project's Vite configuration (in [`viteFinal`](../api/main-config/main-config-vite-final.mdx) in your `.storybook/main.js|ts` file) is automatically applied to your Vitest configuration, with one exception: the plugins.

The above example places the Vite configuration in a Vitest configuration file. You can also place it in a Vitest workspace file, if that is how your project is configured.
If you are running any plugins in `viteFinal`, you will likely also need to run those in the Vitest configuration.

### How do I isolate Storybook tests from others?

Expand Down
49 changes: 23 additions & 26 deletions docs/writing-tests/test-coverage.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,29 @@ Before coverage can be calculated, you may need to install a support package cor

{/* prettier-ignore-end */}

Additionally (until Vitest 3.0.0 is released), the generated coverage report will include the stories files themselves and output from your built Storybook application. This is misleading and they should be excluded. To do this, you can add the following to your Vitest config:

```ts title="vitest.config.ts"
import { coverageConfigDefaults, defineConfig } from 'vitest/config';

export default defineConfig({
// ...
test: {
coverage: {
// 👇 Add this
exclude: [
...coverageConfigDefaults.exclude,
'**/.storybook/**',
// 👇 This pattern must align with the `stories` property of your `.storybook/main.ts` config
'**/*.stories.*',
// 👇 This pattern must align with the output directory of `storybook build`
'**/storybook-static/**',
kylegach marked this conversation as resolved.
Show resolved Hide resolved
],
}
}
})
```

### Usage

Because coverage is built into the Test addon, you can use it everywhere you run your tests.
Expand Down Expand Up @@ -188,32 +211,6 @@ When calculating coverage in the Storybook UI, the following options are always
- `reporter`
- `reportsDirectory`

### Troubleshooting

#### Excluding stories from the coverage report

Until Vitest 3.0.0 is released, the generated coverage report will include the stories files themselves and output from your built Storybook application. This is misleading and they should be excluded. To do this, you can add the following to your Vitest config:

```ts title="vitest.config.ts"
import { coverageConfigDefaults, defineConfig } from 'vitest/config';

export default defineConfig({
// ...
test: {
coverage: {
// 👇 Add this
exclude: [
...coverageConfigDefaults.exclude,
// This pattern must align with the `stories` property of your `.storybook/main.ts` config
'**/*.stories.*',
// This pattern must align with the output directory of `storybook build`
'storybook-static/**',
],
}
}
})
```

</If>

## With the coverage addon
Expand Down
Loading