Addon-docs: Module format embedding example (#7441)

Addon-docs: Module format embedding example

examples/official-storybook/stories/demo/button.stories.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
 import { Button } from '@storybook/react/demo';
 
@@ -21,7 +21,17 @@ export const withSomeEmoji = () => (
     </span>
   </Button>
 );
-
 withSomeEmoji.story = {
   name: 'with some emoji',
 };
+
+export const withCounter = () =>
+  React.createElement(() => {
+    const [counter, setCounter] = useState(0);
+    const label = `Testing: ${counter}`;
+    return <Button onClick={() => setCounter(counter + 1)}>{label}</Button>;
+  });
+
+withCounter.story = {
+  name: 'with coumter',
+};

examples/official-storybook/stories/demo/module-stories-embed.test.js

@@ -0,0 +1,21 @@
+import { render, fireEvent } from 'react-testing-library';
+import { withText, withCounter } from './button.stories';
+
+const mockAction = jest.fn();
+jest.mock('@storybook/addon-actions', () => ({
+  action: () => mockAction,
+}));
+
+describe('module story embedding', () => {
+  it('should test actions', () => {
+    const comp = render(withText());
+    fireEvent.click(comp.getByText('Hello Button'));
+    expect(mockAction).toHaveBeenCalled();
+  });
+
+  it('should test story state', () => {
+    const comp = render(withCounter());
+    fireEvent.click(comp.getByText('Testing: 0'));
+    expect(comp.getByText('Testing: 1')).toBeTruthy();
+  });
+});