Merge pull request #18 from storybookjs/fix/error-on-unsupported-format

fix: throw error on unsupported formats

Author: yannbf

README.md

@@ -34,7 +34,22 @@ yarn add --dev @storybook/testing-react
 
 ### Storybook CSF
 
-This library requires you to be using Storybook's [Component Story Format (CSF)](https://storybook.js.org/docs/react/api/csf), which is the recommended way to write stories since Storybook 6.
+This library requires you to be using Storybook's [Component Story Format (CSF)](https://storybook.js.org/docs/react/api/csf) and [hoisted CSF annotations](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#hoisted-csf-annotations), which is the recommended way to write stories since Storybook 6.
+
+Essentially, if your stories look similar to this, you're good to go!
+
+```jsx
+// CSF: default export (meta) + named exports (stories)
+export default {
+  title: 'Example/Button',
+  component: Button,
+};
+
+const Primary = args => <Button {...args} />; // or with Template.bind({})
+Primary.args = {
+  primary: true,
+};
+```
 
 ### Global config
 

example/src/stories/Button.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import addons, { useChannel } from '@storybook/addons';
+import addons from '@storybook/addons';
 import { render, screen } from '@testing-library/react';
 
 import { composeStories, composeStory } from '../../../dist/index';
@@ -75,3 +75,30 @@ test('should pass with decorators that ne addons channel', () => {
   const buttonElement = screen.getByText(/Hello world/i);
   expect(buttonElement).not.toBeNull();
 });
+
+describe('Unsupported formats', () => {
+  test('should throw error StoryFn.story notation', () => {
+    const UnsupportedStory = () => <div>hello world</div>;
+    UnsupportedStory.story = { parameters: {} }
+    
+    const UnsupportedStoryModule: any = {
+      default: {},
+      UnsupportedStory
+    }
+  
+    expect(() => {
+      composeStories(UnsupportedStoryModule)
+    }).toThrow();
+  });
+
+  test('should throw error with non component stories', () => {
+    const UnsupportedStoryModule: any = {
+      default: {},
+      UnsupportedStory: 123
+    }
+  
+    expect(() => {
+      composeStories(UnsupportedStoryModule)
+    }).toThrow();
+  });
+})

src/index.ts

@@ -65,6 +65,13 @@ export function composeStory<GenericArgs>(
     );
   }
 
+  if((story as any).story !== undefined) {
+    throw new Error(
+      `StoryFn.story object-style annotation is not supported. @storybook/testing-react expects hoisted CSF stories.
+       https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#hoisted-csf-annotations`
+    );
+  }
+
   const finalStoryFn = (context: StoryContext) => {
     const { passArgsFirst = true } = context.parameters;
     if (!passArgsFirst) {