Enforce usage of "composeStories"

[donaldpipowitch]

Is your feature request related to a problem? Please describe.

I always find it annoying that when my Storybook examples grow in complexity (e.g. decorators get added) I have to go back to test files and manually add composeStories. It would be way nicer if everyone in the project would start to write tests with composeStories from the beginning.

Describe the solution you'd like

It should not be possible to do something like this:

import { Example } from 'stories/components/forms/multi-select.stories';

test('<MultiSelect />: renders', () => {
  render(<Example />);
  expect(screen.getByTestId('multi-select-status')).toBeInTheDocument();
});

Only this should be allowed:

import { composeStories } from '@storybook/react';
import * as stories from 'stories/components/forms/multi-select.stories';

const { Example } = composeStories(stories);

test('<MultiSelect />: renders', async () => {
  render(<Example />);
  expect(screen.getByTestId('multi-select-status')).toBeInTheDocument();
});

Describe alternatives you've considered ...

Additional context ...

[yannbf]

Hey @donaldpipowitch that's an interesting idea! It does feel a little weird though because the eslint rules for this plugin only apply to storybook-specific files e.g. *.stories.@(ts|tsx|js|jsx|mjs|cjs) and .storybook/main.@(js|cjs|mjs|ts).

Maybe the plugin could have a rule that is not applied to any file, and users would have to manually apply such rule in an overrides field, like:

{
  overrides: [
      {
        files: ['*.test.@(ts|tsx|js|jsx|mjs|cjs)', '*.spec.@(ts|tsx|js|jsx|mjs|cjs)'],  
        rules: {
          'storybook/use-compose-stories': 'warn'
        },
      },
  ]
}

[donaldpipowitch]

That sounds great!