Official-storybook: Add hooks-based state example & embed it in jest

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

@@ -1,15 +0,0 @@
-import { render, fireEvent } from 'react-testing-library';
-import { withText } from './button.stories';
-
-const mockAction = jest.fn();
-jest.mock('@storybook/addon-actions', () => ({
-  action: () => mockAction,
-}));
-
-describe('button interactivity', () => {
-  it('should handle clicks', () => {
-    const comp = render(withText());
-    fireEvent.click(comp.getByText('Hello Button'));
-    expect(mockAction).toHaveBeenCalled();
-  });
-});

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';
 
@@ -24,3 +24,14 @@ export const withSomeEmoji = () => (
 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();
+  });
+});