storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.62k stars 9.31k forks source link

[Bug]: skip-test and no-tests does not prevent story to be executed in test-runner #28773

Open unional opened 3 months ago

unional commented 3 months ago

Describe the bug

I have some performance/stress stories. It significantly slow down or cause timeout during CI.

I want to skip them by adding tags: ['no-tests'] or skip-test. But the story/loaders are still executed.

Reproduction link

https://stackblitz.com/edit/github-qulsxa-brnno6?file=package.json

Reproduction steps

Adding no-tests or skip-test tags and run test-storybook

System

Storybook Environment Info:

  System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
    pnpm: 9.0.4 - ~/.nvm/versions/node/v20.12.2/bin/pnpm <----- active
  Browsers:
    Chrome: 127.0.6533.74
    Safari: 17.5

Additional context

No response

greptile-apps[bot] commented 3 months ago

Disclaimer This information might be inaccurate, due to it being generated automatically To resolve the issue where skip-test and no-tests tags do not prevent stories from being executed in the test-runner, ensure your .storybook/test-runner.js or .storybook/test-runner.ts configuration includes the correct tags. Here are the steps:

  1. Update .storybook/test-runner.js:
module.exports = {
  tags: {
    include: ['test-only', 'pages'],
    exclude: ['no-tests', 'tokens'],
    skip: ['skip-test', 'layout'],
  },
};
  1. Update .storybook/test-runner.ts:
import type { TestRunnerConfig } from '@storybook/test-runner';

const config: TestRunnerConfig = {
  tags: {
    include: ['test-only', 'pages'],
    exclude: ['no-tests', 'tokens'],
    skip: ['skip-test', 'layout'],
  },
};

export default config;

Ensure your stories are tagged appropriately, for example in MyComponent.stories.js:

import { MyComponent } from './MyComponent';

export default {
  component: MyComponent,
  tags: ['skip-test'],
};

export const SkipStory = {
  tags: ['skip-test'],
};

Or in MyComponent.stories.ts:

import type { Meta, StoryObj } from '@storybook/your-framework';
import { MyComponent } from './MyComponent';

const meta: Meta<typeof MyComponent> = {
  component: MyComponent,
  tags: ['skip-test'],
};

export default meta;
type Story = StoryObj<typeof MyComponent>;

export const SkipStory: Story = {
  tags: ['skip-test'],
};

References

/docs/_snippets/test-runner-tags-config.md /docs/_snippets/my-component-skip-tags.md /docs/_snippets/test-runner-tags-exclude.md /docs/_snippets/test-runner-tags-skip.md /docs/_snippets/test-runner-no-index-json.md /code/lib/cli/src/automigrate/index.test.ts /docs/api/main-config/main-config-build.mdx /.github/DISCUSSION_TEMPLATE/help.yml /docs/_snippets/test-runner-with-index-json.md /.github/DISCUSSION_TEMPLATE/ideas.yml /docs/_snippets/my-component-exclude-tags.md /docs/_snippets/test-runner-with-deploy-event-workflow.md /code/core/src/types/modules/core-common.ts /code/core/src/core-server/utils/mockdata/errors/NoMeta.stories.ts /.github/comments/invalid-link.md /code/lib/cli/src/automigrate/fixes/mdx-to-csf.test.ts /code/e2e-tests/addon-docs.spec.ts /code/lib/test/template/stories/loader-enhancements.stories.ts /docs/_snippets/test-runner-execute-with-flags.md /code/core/src/csf-tools/CsfFile.test.ts /docs/_snippets/storybook-build-test-flag.md /code/renderers/react/src/docs/jsxDecorator.tsx /docs/_snippets/test-runner-eject-config.md /docs/_snippets/test-runner-execute-with-url.md /code/lib/cli/src/automigrate/fixes/sb-binary.test.ts

#### About Greptile This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a ๐Ÿ‘ if this is helpful and ๐Ÿ‘Ž if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/storybookjs/storybook/next) ยท [Edit Issue Bot Settings](https://app.greptile.com/apps/github)
unional commented 3 months ago

The suggestions by greptile-apps actually help.

Those tags are not defined by default. Is it possible to make them default? Also, I also notice tags: { include: ['test-only', 'pages'] } causing no story are executed.

Is there a way to indicate "include stories without tags"?

Medha170 commented 3 months ago

Can you assign this issue to me?

valentinpalkovic commented 3 months ago

@Medha170 I think the test-runner docs are outdated. Instead you should use the following syntax to disable stories for tests:

  tags: ['!test'],

cc @yannbf, @jonniebigodes

yannbf commented 3 months ago

We updated the docs over here and will soon move to the Storybook docs!