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.

Sign up for GitHub

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
+47 −70
Open

Docs: Fixes found during 8.5 QA #30103

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fcd2b24
Docs fixes found during 8.5 QA
kylegach Dec 18, 2024
8cbd0ca
Correct `viteFinal` guidance
kylegach Dec 19, 2024
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
6 changes: 6 additions & 0 deletions docs/_snippets/vitest-plugin-vitest-config.md
View file
Open in desktop
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
View file
Open in desktop
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
13 changes: 10 additions & 3 deletions docs/writing-tests/test-addon.mdx
View file
Open in desktop
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
49 changes: 23 additions & 26 deletions docs/writing-tests/test-coverage.mdx
View file
Open in desktop
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