From 949c6317a3a0d6f2120a3083bc0862367db676e6 Mon Sep 17 00:00:00 2001
From: Sasanfarrokh <sasan.farrokh@gmail.com>
Date: Sun, 5 Sep 2021 01:25:52 +0430
Subject: [PATCH] fix(storyshots): vue3 render with the vue app

---
 .../src/frameworks/vue3/renderTree.ts         | 22 +++++++------------
 app/vue3/src/client/index.ts                  |  1 +
 app/vue3/src/client/preview/index.ts          |  1 +
 app/vue3/src/client/preview/render.ts         |  2 +-
 4 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/addons/storyshots/storyshots-core/src/frameworks/vue3/renderTree.ts b/addons/storyshots/storyshots-core/src/frameworks/vue3/renderTree.ts
index 9e9f4084b8f..9d2cc999ced 100644
--- a/addons/storyshots/storyshots-core/src/frameworks/vue3/renderTree.ts
+++ b/addons/storyshots/storyshots-core/src/frameworks/vue3/renderTree.ts
@@ -1,12 +1,14 @@
 import * as Vue from 'vue';
 import global from 'global';
 import dedent from 'ts-dedent';
+import { app, activeStoryComponent } from '@storybook/vue3';
 
 const { document } = global;
 
 // This is cast as `any` to workaround type errors caused by Vue 2 types
-const { render, h } = Vue as any;
+const { h } = Vue as any;
 
+let vm: any;
 function getRenderedTree(story: any) {
   const component = story.render();
 
@@ -14,20 +16,12 @@ function getRenderedTree(story: any) {
 
   // Vue 3's Jest renderer throws if all of the required props aren't specified
   // So we try/catch and warn the user if they forgot to specify one in their args
-  try {
-    render(vnode, document.createElement('div'));
-  } catch (err) {
-    // Jest throws an error when you call `console.error`
-    // eslint-disable-next-line no-console
-    console.error(
-      dedent`
-        Storyshots encountered an error while rendering Vue 3 story: ${story.id}
-        Did you remember to define every prop you are using in the story?
-      `
-    );
+  activeStoryComponent.value = vnode;
+  if (!vm) {
+    vm = app.mount(document.createElement('div'));
   }
-
-  return vnode.el;
+  vm.$forceUpdate();
+  return vm.$el;
 }
 
 export default getRenderedTree;
diff --git a/app/vue3/src/client/index.ts b/app/vue3/src/client/index.ts
index 57d0e7c7f30..de13a1bc49f 100644
--- a/app/vue3/src/client/index.ts
+++ b/app/vue3/src/client/index.ts
@@ -8,6 +8,7 @@ export {
   forceReRender,
   raw,
   app,
+  activeStoryComponent,
 } from './preview';
 
 export * from './preview/types-6-0';
diff --git a/app/vue3/src/client/preview/index.ts b/app/vue3/src/client/preview/index.ts
index 47be7a4ce43..31474953b5a 100644
--- a/app/vue3/src/client/preview/index.ts
+++ b/app/vue3/src/client/preview/index.ts
@@ -117,3 +117,4 @@ export const { forceReRender } = api;
 export const { getStorybook } = api.clientApi;
 export const { raw } = api.clientApi;
 export const app: ClientApi['app'] = storybookApp;
+export { activeStoryComponent } from './render';
diff --git a/app/vue3/src/client/preview/render.ts b/app/vue3/src/client/preview/render.ts
index 6a9cf7e1e64..a677ec7eaab 100644
--- a/app/vue3/src/client/preview/render.ts
+++ b/app/vue3/src/client/preview/render.ts
@@ -2,7 +2,7 @@ import dedent from 'ts-dedent';
 import { createApp, h, shallowRef, ComponentPublicInstance } from 'vue';
 import { RenderContext, StoryFnVueReturnType } from './types';
 
-const activeStoryComponent = shallowRef<StoryFnVueReturnType | null>(null);
+export const activeStoryComponent = shallowRef<StoryFnVueReturnType | null>(null);
 
 let root: ComponentPublicInstance | null = null;