test: add test for dynamic components

Author: antfu

playground/Bar.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Bar</div>
+</template>

playground/Foo.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Foo</div>
+</template>

playground/HelloWorld.vue

@@ -6,11 +6,14 @@
     </button>
     <div>{{ count }} x 2 = {{ doubled }}</div>
     <button @click="dec()" v-html="decText" />
+    <component :is="count > 2 ? Foo : Bar" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, watch } from '@vue/composition-api'
+import Foo from './Foo.vue'
+import Bar from './Bar.vue'
 
 const props = withDefaults(defineProps<{ msg: string; name: string | number }>(), { msg: 'Hello' })
 const emit = defineEmits(['update'])
@@ -23,7 +26,7 @@ function inc() {
 }
 
 function dec() {
-  count.value += 1
+  count.value -= 1
 }
 
 const decText = '<b>Dec</b>'

test/__snapshots__/transform.test.ts.snap

@@ -252,6 +252,20 @@ export default __sfc_main;
 "
 `;
 
+exports[`transform playground Bar.vue 1`] = `
+"<template>
+  <div>Bar</div>
+</template>
+"
+`;
+
+exports[`transform playground Foo.vue 1`] = `
+"<template>
+  <div>Foo</div>
+</template>
+"
+`;
+
 exports[`transform playground HelloWorld.vue 1`] = `
 "<template>
   <div>
@@ -261,11 +275,14 @@ exports[`transform playground HelloWorld.vue 1`] = `
     </button>
     <div>{{ count }} x 2 = {{ doubled }}</div>
     <button @click=\\"dec()\\" v-html=\\"decText\\" />
+    <component :is=\\"count > 2 ? Foo : Bar\\" />
   </div>
 </template>
 
 <script lang=\\"ts\\">
 import { ref, computed, watch } from '@vue/composition-api';
+import Foo from './Foo.vue';
+import Bar from './Bar.vue';
 const __sfc_main = {
   name: 'App'
 };
@@ -294,12 +311,14 @@ __sfc_main.setup = (__props, __ctx) => {
   }
 
   function dec() {
-    count.value += 1;
+    count.value -= 1;
   }
 
   const decText = '<b>Dec</b>';
   watch(count, value => emit('update', value));
   return {
+    Foo,
+    Bar,
     count,
     doubled,
     inc,