Make sure mocked actions can be identified in production build (#482)

- Enable esbuild keep names as workaround
- Add interactive test in vue example

Fixes #206.

examples/vue/.storybook/main.ts

@@ -4,7 +4,7 @@ const { mergeConfig } = require('vite');
 export default {
   framework: '@storybook/vue3',
   stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
   core: {
     builder: '@storybook/builder-vite',
     // we don't want to muck up the data when we're working on the builder
@@ -16,7 +16,9 @@ export default {
   async viteFinal(config, { configType }) {
     // Demonstrates use of mergeConfig and resolve.alias as an array
     return mergeConfig(config, {
-      resolve: { alias: [{ find: '@assets', replacement: resolve(__dirname, '..', 'stories', 'assets') }] },
+      resolve: {
+        alias: [{ find: '@assets', replacement: resolve(__dirname, '..', 'stories', 'assets') }],
+      },
     });
   },
 };

examples/vue/.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>

examples/vue/package.json

@@ -19,10 +19,13 @@
   "devDependencies": {
     "@storybook/addon-a11y": "^6.5.9",
     "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-interactions": "6.5.9",
     "@storybook/builder-vite": "workspace:*",
+    "@storybook/jest": "^0.0.10",
     "@storybook/mdx2-csf": "^0.0.3",
-    "@storybook/test-runner": "0.1.0",
-    "@storybook/vue3": "^6.5.9",
+    "@storybook/test-runner": "^0.5.0",
+    "@storybook/testing-library": "^0.0.13",
+    "@storybook/vue3": "6.5.9",
     "@vitejs/plugin-vue": "^3.0.0-beta.1",
     "http-server": "^14.1.0",
     "jest": "^27.5.1",

examples/vue/stories/Button.stories.js

@@ -1,4 +1,6 @@
 import MyButton from './Button.vue';
+import { userEvent, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
 
 export default {
   title: 'Example/Button',
@@ -28,6 +30,12 @@ Primary.args = {
   primary: true,
   label: 'Button',
 };
+Primary.play = async ({ args, canvasElement }) => {
+  const canvas = within(canvasElement);
+  const button = canvas.getByRole('button');
+  await userEvent.click(button);
+  await expect(args.onClick).toHaveBeenCalled();
+};
 
 export const Secondary = Template.bind({});
 Secondary.args = {

packages/builder-vite/build.ts

@@ -15,6 +15,11 @@ export async function build(options: ExtendedOptions) {
       emptyOutDir: false, // do not clean before running Vite build - Storybook has already added assets in there!
       sourcemap: true,
     },
+    esbuild: {
+      // Workaround for #206: https://github.com/storybookjs/builder-vite/issues/206#issuecomment-1122347230
+      // Makes sure that mocked actions can be recognized in the production build.
+      keepNames: true,
+    },
   };
 
   const finalConfig = await presets.apply('viteFinal', config, options);